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What's new 


What’s new in CS6 


Extract CSS object properties 

Export slices as CSS sprite 

Creating jQuery mobile themes 
Performance improvements 

Set opacity separately for fill and stroke 
Color selection improvement 

Set the angle for gradient or pattern fills 
New fw.png filename extension 
Miscellaneous enhancements 

API enhancements 


A To the to 

Extract CSS object properties j 
You can extract CSS object properties, such as rounded corners, gradients, drop shadows, and transformations. 

1. Select the object. 

2. Select Window > CSS Properties. 

3. Click Copy All to copy the CSS properties of the selected object. Click Copy Selected to copy individual properties. 

For more information, see Extract CSS properties from design objects using Fireworks CS6. 
To the top 


Export slices as CSS sprite 
You can slice objects in a document and export them as a single CSS sprite image. Using a single CSS sprite image instead of multiple images 
improves the loading time of a website by reducing the number of server requests. 
When you export slices as a CSS sprite image, with the image file, a CSS file that contains the displacement values is also generated. 

1. Right-click the slice or group of slices. 


2. Select Export CSS Sprite. 
3. In the Export dialog box, click Export. 


For more information, see Working with CSS sprites in Fireworks CS6. 


Creating jQuery mobile themes To the top 


You can create jQuery mobile themes based on default sprites and swatches. You can also preview the jQuery mobile theme and export it as CSS 
and sprites. 

e To create a mobile theme, select Commands > jQuery Mobile Theme > Create New Theme. 

e To preview mobile themes in a browser, select Commands > jQuery Mobile Theme > Preview Theme. 

e To export a mobile theme as sprites and CSS, select Commands > jQuery Mobile Theme > Export Theme. 

e To preview the theme, select Window > Extensions > jQuery Mobile Theme In-App Preview. 

e To add an icon placeholder, select jQuery Mobile Theme > Insert Icon Placeholder. 


For more information, see Create jQuery Mobile themes using Fireworks CS6. 


. To the top 
Performance improvements 
e To address the not enough memory issue, the usage of GDI objects by Fireworks has been reduced. 
e Memory usage limit increased on Windows 64-bit computers for better stability when opening and saving large files. 
e On Mac OS, improved refresh rate of the Property Inspector when switching between objects. 
To the top 


Set opacity separately for fill and stroke 


1. Select the object and select the Stroke or Fill color picker. Alternatively, select the Fill or Stroke color picker from the Tools bar. 


2. Click the Opacity slider. 


3. Drag the slider to the desired value. 
On Mac OS, type the value in the text box. 


. > To thet 
Color selection improvement RERE 


e Use buttons to specify fill type options such as no fill, solid, gradient, and patterns in the Property inspector and Tools bar. Previously, these 
options were handled through drop-down menus. 


e You can now specify Stroke position (inside, center, outside) using the Stroke dialog box. 


i To the to 
Set the angle for gradient or pattern fills ij 
1. Select the object. 
2. In the Property Inspector, select the gradient or pattern fill. 
3. In the Edit Gradient or Edit Pattern dialog box, specify the angle value. 
To the top 


New fw.png filename extension 


When you save a file, it is saved with the fw.png extension by default. 


To change the default behavior, select Edit > Preferences. In the General tab of the Preferences dialog box, deselect Append .fw.png, and click 
OK. 


You can also remove this extension in the Save As dialog box. 


n To the to 
Miscellaneous enhancements P 


e Enhancements to the Styles panel. 
e Location node for color stop in the Gradient tool is highlighted. 


e Using the Eyedropper tool, you can copy, fill, and stroke color. 
Select the Eyedropper tool, right-click the object, and select the desired option. 


e You can now locate the default Fireworks template and common library symbols in the Users directory. 
If a common library symbol is deleted, a new copy of the symbol is created when you restart Fireworks. 


e The selected object name and zoom level now do not appear in the document's title bar. This information is available in the Layers panel 
and application bar. 


e Updates to the path panel and swatches. 
e On Mac OS, you can now preview the image files in Google Chrome. 
e The Path option that gives quick access to many path-related commands is provided in the Window menu. 
e The Group as Mask option is provided with the right-click context menu. 
e The default optimization setting for a new file is PNG32. 
e Deprecated features: 

e AIR export 

e Create slide show 

e Flex Skinning 

e Device Central 

e Share My Screen 


e You can now lock constraints for the Crop tool using the Property Inspector. 
e Thumbnail icons for objects in the Layers panel. 


e The following assets are now available in the common library: Gesture, Icons, iPhone, jQuery Bootstrap, Wireframe, Wireframe-Ads, 
Wireframe-iPad, Wireframe-iPhone, and Wireframe Windows Phone 7. 


e Styles library has been updated with the following categories: Button symbol styles, fill design patterns, stroke color dots, and web button 
styles. 


e Tool tips are now available for the File Import operation. 
e While saving a symbol to the common library, it is retained on the canvas. 
e More options are now available for patterns and textures. 


e Inside the Gradient Fill dialog box, use CTRL+Left or CTRL+Right Arrow keys to navigate between the color stops or opacity stops. On Mac, 
use Command+LEFT or Command+Right. 


API enhancements 


Libraries are updated with more patterns and textures. 


To the top 


New methods 


fw.appTemplatesDir: Returns the path to the template directory. 
fw.commonLibraryDir: Returns the path to the common library directory. 


fw.activeTool: Ascertains whether the active tool is the specified tool. 
For example, use if (fw.activeTool==Tools.pen) to discover whether the active tool is the Pen tool. This method does not depend on 
the tool name in the localized language. 


fw.appPatternsDir: Returns the path to the Patterns directory. 
fw.appTexturesDir: Returns the path to the Textures directory. 
fw.reloadPatterns: Reloads the patterns from the Patterns directory. 
fw.reloadTextures: Reloads the texture from the Textures directory. 


dom. updateSymbol: Updates the symbol imported from the common library. 


Updated methods 


fw.browseForFileURL(browseType, title, previewArea, startFolder ): A new optional parameter, startFolder, specifies 
the root directory for the Browse dialog box. 

fw.setDocumentImageSize(boundingRectangle, resolution, currentPageOnly, interpolationMethod): A new optional 
parameter, interpolationMethod, takes integer values from 1 to 4 specifying bicubic, bilinear, soft, and nearest neighbor, respectively. 


fw.saveAs(doc, url, defaultFromOptions): Default value for the defaultFromOptions parameter is changed to false. If it is 
set to true, the file is saved with the current optimization settings. 
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What’s new 


Improved performance, stability 

Pixel Precision 

Adobe Device Central integration 

Supported workflows with Flash Catalyst and Flash Builder 
Extensibility improvements 

Swatch sharing across the suite 


Improved performance, stability i 
e Numerous improvements to most frequently used tools in Fireworks that help increase your work efficiency 
e Faster overall performance 
e Greater control over pixel placement of design elements 
e Updated compound path tool 
To the top 


Pixel Precision 


Enhanced pixel precision ensures that your designs look crisp and clean on any device. Quickly and easily correct design elements that do not 
appear on a whole pixel. 


Adobe Device Central integration ee 


Using Adobe Device Central, you can select profiles for mobile or other devices, then start an automated workflow to create a Fireworks project. 
The project has the screen size and resolution of the target device. After the design is complete, you can preview the design under various 
conditions using the emulation capabilities of Device Central. You can also create custom device profiles. 


Improved mobile design workflows including emulation of interactive designs with integration with Adobe Device Central. 


Supported workflows with Flash Catalyst and Flash Builder Tonthetop 


Create advanced user interfaces and interactive content using new workflows between Fireworks and Flash Catalyst.Design in Fireworks and 
select objects, pages, or whole documents to export through FXG, a new XML-based graphics format for the Adobe Flash Platform tools. Export 
your designs efficiently to Flash Professional, Flash Catalyst and Flash Builder through a customizable extensible script. 


ip EEE . To thet 
Extensibility improvements Crean 


Experience greater control when working with other applications: Enhanced API supporting user-extensible export scripts, batch processing, and 
advanced control over the FXG file format. 


š a To thet 
Swatch sharing across the suite ESE 


Better control over color accuracy using the ability in Fireworks to conveniently share swatches across Creative Suite applications. The ability to 
share the ASE file format encourages unified color exchange among designers including those using Adobe Kuler. 


O 
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Fireworks basics 


Learn Fireworks CS6 video tutorials 
video-tutorial (May. 2, 2012) 


Create Fireworks PNG files from HTML files 


Open only the first table of an HTML file 
Import the first table of an HTML file into an open Fireworks document 


Fireworks can open and import HTML content created in other applications that contain basic HTML table elements. 


P : To thet 
Open only the first table of an HTML file AERE 
1. Select File > Open. 
2. Select the HTML file that contains the table you want to open, and click Open. 
The first table in the HTML file opens in a new document window. 
To the top 


Import the first table of an HTML file into an open Fireworks document 
1. Select File > Import. 
2. Select the HTML file you want to import from, and click Open. 
3. Click to place the insertion point where you want the imported table to appear. 


Note: Fireworks can import documents that use UTF-8 encoding and those that are written in XHTML. 


O 
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Creating a new Fireworks document 


Create a new document 
Set default dimensions for new document 
Create a new document the same size as an object on the Clipboard 


New documents in Fireworks are saved as Portable Network Graphic (PNG) documents. PNG is the native file format for Fireworks. 


Graphics created in Fireworks can be exported to or saved in several web and graphic formats. Regardless of the optimization and export settings 
you select, the original Fireworks PNG file is preserved to allow easy editing later. 


To the to 
Create a new document p 
1. Select File > New. 
The New Document dialog box opens. 
New Document 
Canvas Size: 976.6K 
Width: [500 | | Pixels 
Height: 500 Pixels 
Resolution: |96 | /Pigels/Inch 
Canvas Color: 
© White 
O Transparent 
© Custom E 
2. Enter document settings and click OK. 
Note: Use the Custom color box pop-up window to select a custom canvas color. 
To the top 


Set default dimensions for new document 

When you open Fireworks for the first time, the following values for dimensions appear in the New Document dialog as default: 
e 660 x 440 (Windows) 
e 500 x 500 (Mac) 

Settings in the New Document dialog are not changed when you change the canvas size in Fireworks. 


The default settings get changed when you copy an object. Dimensions of the copied object (on the clipboard) are automatically used for 
dimensions in the New Document dialog. 


To clear object dimensions from the clipboard, do the following (Windows): 
1. Create a document with the preferred dimensions. 
2. Save the document, and close Fireworks. 
3. Reopen Fireworks, and create a document. 
The dimensions of the previously saved document appear in the New Document dialog. 


For Mac OS, Fireworks retains the dimension of a previously copied object when creating a new document. This is because clipboard contents are 
retained until you cut or copy other elements, such as text. If you copy elements unrelated to dimensions, and then select "New", the previously- 
saved size appears as default. 


To the top 


Create a new document the same size as an object on the Clipboard 
1. Copy an object to the Clipboard from another Fireworks document, a web browser, or from any application that is acceptable for pasting. 
2. Select File > New. 
The New Document dialog box opens with the width and height dimensions of the object on the Clipboard. 
3. Set the resolution and canvas color, and click OK. 
4. Select Edit > Paste to paste the object from the Clipboard into the new document. 


More Help topics 


(G5) v-e -sa | 
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Fireworks basics 


Draw and edit vector and bitmap objects 
Add interactivity to graphics 

Optimize and export graphics 

Vector and bitmap graphics 


Adobe® Fireworks® is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector 
images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating 
repetitive tasks. You can export or save a document as a JPEG file, GIF file, or file of another format. These files can be saved along with HTML 
files containing HTML tables and JavaScript code so you can use them on the web. 


For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_ fw. 


a i 5 To the to 
Draw and edit vector and bitmap objects P 
The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps. The tool you select determines 
whether the object you create is a vector or a bitmap. After drawing an object or text, you can use a wide array of tools, effects, commands, and 
techniques to enhance your graphics or to create interactive navigation buttons. 


You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats. 


P a à To the to 
Add interactivity to graphics i 
Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable sections to which you can 
apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web page, each slice appears in a table cell. 


Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to graphics. Use the Fireworks 
Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating websites. 


ee e To thet 
Optimize and export graphics PERR 
Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual quality for exported 
graphics. The type of optimization you choose depends on the needs of your users and the content. 


After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source PNG document, you can export 
files of a number of types, including JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types. 


; : To the t 
Vector and bitmap graphics Mere 
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand 
Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats. 


About vector graphics 

Vector graphics render images using lines and curves (vectors) that include color and position information. For example, the image of a leaf can 
be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and 
the color of the area enclosed by the outline (the fil/). 


Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change when you change its color; 


10 


move, resize, or reshape it; or when the resolution of the output device changes. 


About bitmap graphics 

Bitmap graphics are composed of dots (pixels) arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, 
the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct 
resolution, the dots fit together like tiles in a mosaic. 


When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means 
that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, which can 
make the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can 
also degrade the image's quality. 


More Help topics 


O 
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Insert objects into a Fireworks document 


Drag an image or text into Fireworks 

Paste into Fireworks 

Location of pasted objects 

Resample pasted objects 

Import a PNG file into a Fireworks document layer 
Import from a digital camera or scanner 


Drag an image or text into Fireworks 


To the top 


You can drag vector objects, bitmap images, or text from any application that supports dragging. 


“* From the other application, drag the object or text into Fireworks. 


Paste into Fireworks 


To the top 


Pasting an object copied from another application into Fireworks places the object in the center of the active document. 


Text or objects in any of these formats can be pasted from the Clipboard: 


Location of pasted objects 


Adobe FreeHand 7 or later 
Adobe Illustrator 
PNG 
PICT (Mac OS) 
DIB (Windows) 
BMP (Windows) 
ASCII text 
EPS 
WBMP 
TXT 
RTF 
1. In the other application, copy the object or text that you want to paste. 


2. In Fireworks, paste the object or text into your document. 


To the top 


The placement of the pasted object depends on what is selected: 


Resample pasted objects 


If at least one object on a single layer is selected, the pasted object is placed in front of (stacked directly above) the selected object on the 
same layer. 


If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of (stacked directly above) 
the topmost object on the same layer. 


If two or more objects on more than one layer are selected, the pasted object is placed in front of (stacked directly above) the topmost object 
in the topmost layer. 


If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in front of (stacked above) all other objects on the 
bottommost layer. 


Note: The Web Layer is a special layer that contains all web objects. It always remains at the top of the Layers panel. 


To the top 


12 


Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible. 
Resampling a bitmap to a higher resolution typically causes little loss of quality. Resampling to a lower resolution always causes data loss and 


usually results in a drop in quality. 


Resample a bitmap object by pasting 
1. Copy the bitmap to the Clipboard in Fireworks or another program. 
2. Select Edit > Paste in Fireworks. 
3. If the bitmap image on the Clipboard has a different resolution than the current document does, choose a resample option. 
Resample Maintains the original width and height of the pasted bitmap, adding, or subtracting pixels as necessary. 


Don't Resample Maintains all the original pixels, which may make the relative size of the pasted image larger or smaller than expected. 


Import a PNG file into a Fireworks document layer eee 


When you import Fireworks PNG files into the current layer of the active Fireworks document, hotspot objects and slice objects are placed on the 
document's Web Layer. Fireworks retains the proportions of the imported image. 


1. In the Layers panel, select the layer into which you want to import the file. 
2. Select File > Import to open the Import dialog box. 
3. Navigate to the file you want to import and click Open. 
4. On the canvas, position the import pointer where you want to place the upper left corner of the image. 
5. Do one of the following: 
e Click to import the full-size image. 


e Drag the import pointer to resize the image as you import. 


ae To the top 
Import from a digital camera or scanner 


You can import images from a digital camera or scanner only if it is TWAIN compliant (Windows) or uses built-in Image Capture capability (Mac 
OS). Images imported into Fireworks from a digital camera or scanner open as new documents. 


Before you try to import images into Fireworks, install all required software drivers, modules, and plug-ins for the camera or scanner. 


The Plug-ins folder is located inside the Fireworks application folder. In Mac OS, Fireworks automatically looks for Photoshop Acquire plug-ins in 
that folder. 


Direct Fireworks to Photoshop Acquire plug-ins 
1. In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). 
2. Click the Plug-ins category. 
3. Select Photoshop Plug-Ins and navigate to the folder containing the plug-ins. 


If the Select The Photoshop Plug-ins Folder (Windows) or Choose A Folder (Mac OS) dialog box doesn't open automatically, browse to the 
folder. 


Import an image from a digital camera (Windows) 
1. Connect the camera to your computer. 
2. In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select. 
3. Select the source for the images and the images you want to import. 
The user interface for your camera software appears. 


4. Follow the instructions to apply settings. 


Import an image from a digital camera (Mac OS) 
1. Connect the camera to your computer. 
2. In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera Select. 


3. Select the camera and the images you want to import. 
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4. Follow the instructions to apply settings. 


Import an image from a scanner 

1. Connect the scanner to your computer. 
2. Install the software that accompanies the scanner if you have not already done so. 
3. Do one of the following: 

e (Windows) In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select. 

e (Mac OS) In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select. 

Note: For most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options. 

4. Follow the instructions to apply settings. 


More Help topics 


O 
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Opening and importing files 


Open a Fireworks document 

Open a recently closed file 

Open a recently closed file when no files are open 
Open graphics created in other applications 


Note: When you import a file from Adobe Dreamweaver®, Fireworks preserves many, but not all JavaScript behaviors. If Fireworks supports a 
particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver. 


g To the to 
Open a Fireworks document j 
& Select File > Open and select the file. 
Q To open a file without overwriting the previous version, select Open As Untitled, and then save the file using a different name. 
i To the to 
Open a recently closed file p 
1. Select File > Open Recent. 
2. Select a file from the submenu. 
P n To the to 
Open a recently closed file when no files are open p 
& Click the file name on the Start page. 
To the top 


Open graphics created in other applications 


You can open files created in other applications or file formats, including Photoshop®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated 
GIF files. 


When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open. You can 
use all of the features of Fireworks to edit the image. You can then either select Save As to save your work as a new Fireworks PNG file or as 
another file format. 


In some cases, you can save the file in its original format. If you do this, the image flattens to a single layer, and you will be unable to edit the 
Fireworks-specific features you added to the image. 


The following file formats can be saved directly from Fireworks: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, Al, PSD, 
and PICT (Mac only). 


Note: Fireworks saves 16-bit TIFF images at 24-bit color depth. 


Animated GIFs 


e Import an animated GIF as an animation symbol and then edit and move all the elements of the animation as a single unit. Use the 
Document Library panel to create new instances of the symbol. 


Note: When you import an animated GIF, the state delay setting defaults to 0.07 seconds. If necessary, use the States panel to restore the 
original timing. 


e Open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image in its own Fireworks 
state. You can convert the graphic to an animation symbol in Fireworks. 


EPS files 


Fireworks opens most EPS files as flattened bitmap images in which all objects are combined on a single layer. Some EPS files exported from 
Adobe Illustrator retain their vector information. 


PSD files 
Fireworks can open PSD files created in Photoshop and preserve most PSD features, including hierarchical layers, layer effects, and commonly 
used blend modes. Use the various options for Photoshop Import/Open in the Preferences dialog box to customize PSD import. 
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WBMP files 


Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile computing devices. This format is for use on Wireless 
Application Protocol (WAP) pages. 


Q You can use the Import Multiple Files extension to import multiple selected files into new pages of a Fireworks PNG file. This utility helps you 
aggregate your project files created in earlier versions of Fireworks. You can also import flattened PNG file, PSD, Al, BMP, Freehand, GIF, 
animated GIF, JPEG, PICT, and TIFF formats. You can download this extension from http://www.adobe.com/go/learn_fw_multiplepages_en. 


More Help topics 
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Saving Fireworks files 


Save a Fireworks PNG file for use in an earlier version 
Save all open documents 

Save documents in other formats 

Add a picture frame 

Reset warning messages 

Take screenshot (Windows only) 


When you create a document or open files in formats like PSD or HTML, the File > Save command creates a Fireworks PNG file. Fireworks PNG 
files have the following advantages: 


e The source PNG file is always editable. You can go back and make additional changes even after you export the file for use on the web. 


e You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file formats and various 
optimization settings. 


Q If Fireworks takes time to save a complex document, you can edit other open documents while the save operation completes. 


z ia P A š To the t 
Save a Fireworks PNG file for use in an earlier version ee 


1. Select File > Export. 

2. Browse to the location where you want to save the file. 

3. If the Fireworks file has more than one page, select Pages To Files in the Export pop-up menu. 
4 


. Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page is saved in the default file format. 
This file format can be set using the Optimize panel. For more information see Optimizing and exporting. 


All objects on the top-level layers are saved in the export. Items on sublayers are not exported. 


To thet 
Save all open documents aan 


You can save all open documents even while continuing to work on them and specify filenames for any unnamed documents. Documents that 
have changed since the last save appear with an asterisk (*) against the filename on the document tab. 
& Select Commands > Save All. 


Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download the utility from Adobe AIR 
Marketplace at http://www.adobe.com/go/learn_fw_autobackuputility_en. 


To the top 


Save documents in other formats 


If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work as a new Fireworks PNG 
file, or you can select a different format. 


For the following file types, you can choose File > Save to save the document in its original format: Fireworks PNG, GIF, animated GIF, JPEG, 
BMP, WBMP, TIFF, SWF, Al, PSD, and PICT (Mac OS only). Fireworks saves 16-bit TIFF images at 24-bit color depth. 


Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG are no longer available in 
the bitmap file. To revise the image, edit the source PNG file and then export it again. 


z To the to 
Add a picture frame 7 
1. Select Commands > Creative > Add Picture Frame. 
2. Select a pattern and set the frame size. 
3. Click OK. 
To the top 


Reset warning messages 


If you have disabled warning messages from reappearing, you can re-enable the messages. 
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& Select Commands > Reset Warning Dialogs. 


Take screenshot (Windows only) 
1. Select Commands > Take Screenshot. 
2. Switch to the window you want to take a screenshot of. 


3. Click OK and then drag to select the area of the window. 


4. Paste the clipboard contents on to the canvas or any image editing application. 


More Help topics 
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To the top 


Workspace 


Change the canvas 


Change the canvas size 

Change the canvas color 

Resize a document and its contents 
About resampling 

Rotate the canvas 

Trim or fit the canvas 

Crop a document 

Use rulers, guides, and the grid 
Smart Guides 


You can adjust the canvas at any time. 


. To thet 
Change the canvas size eee 


1. Do one of the following: 
e Select Modify > Canvas > Canvas Size. 


e Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and click the Canvas Size 
button. 


2. Enter the new dimensions in the Width and Height text boxes. 
3. Click an Anchor button to specify which sides of the canvas Fireworks add to or delete from, and click OK. 


Note: By default, the center anchor is selected, indicating that changes to the size of the canvas are made on all sides. 


To thet 
Change the canvas color ee 


& Do one of the following: 
e Select Modify > Canvas > Canvas Color, and select a color option. For a Custom color, click a color in the Swatches pop-up window. 


e From the Property inspector, choose Select > Deselect, click the Pointer tool to display the document properties, and click the Canvas color 
box. Pick a color from the Swatches pop-up window or click the eyedropper on a color. To select a transparent canvas, click the Transparent 
button in the Swatches pop-up window. 


Q To change the default canvas color, click the Custom swatch in the New Document dialog box. (See Creating a new Fireworks 
document.) 


e a To the t 
Resize a document and its contents ene 


1. Do one of the following: 


e Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and click the Image Size 
button in the Property inspector. 


e Select Modify > Canvas > Image Size. 
The Image Size dialog box opens. 
2. In the Pixel Dimensions text boxes, enter new horizontal and vertical dimensions. 


(Optional) Change the units of measure. If Resample Image is deselected, you can change the resolution or print size but not pixel 
dimensions. 


3. In the Print Size text boxes, enter horizontal and vertical dimensions for the printed image. 
4. In the Resolution box, enter a new resolution for the image. 

Changing the resolution changes the pixel dimensions. 
5. Do one of the following: 


e To maintain the same ratio between the document's horizontal and vertical dimensions, select Constrain Proportions. 
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e To resize width and height independently, deselect Constrain Proportions. 
6. To add or remove pixels when resizing so the image retains approximately the same appearance at a different size, select Resample Image. 


7. Select Current Page Only to apply the canvas size change only to the current page. 


š To thet 
About resampling o the top 


Fireworks resamples (resizes) images differently than most image-editing applications do. 
e When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller. 
e When a vector object is resampled, little quality loss occurs because the path is redrawn mathematically at a larger or smaller size. 


Because the attributes of vector objects in Fireworks are visible as pixels, some strokes or fills may appear slightly different after resampling. 
This occurs because the pixels that compose the stroke or fill must be redrawn. 


Note: Guides, hotspot objects, and slice objects are resized when the document's image size is changed. 
You can alter the size of a bitmap image by adjusting the resolution or by resampling the image. 


e When adjusting the resolution, you change the size of the pixels in the image so that more or fewer pixels fit in a given space. Adjusting the 
resolution without resampling does not result in data loss. 


e When resampling, you either add or remove pixels: 


Resampling up Adds pixels to make the image larger. This approach can result in quality loss because the pixels being added do not always 
correspond to the original image. 


Downsampling Removes pixels to make the image smaller and results in data loss in the image. This approach always causes quality loss 
because pixels are discarded to resize the image. 


To thet 
Rotate the canvas o the top 


Rotate the canvas when an image is imported upside down or sideways. You can rotate the canvas 180°, 90° clockwise, or 90° counterclockwise. 
When you rotate the canvas, all objects in the document rotate. 


& Select Modify > Canvas > and choose a rotation option 


` s To thet 
Trim or fit the canvas R 
Expand or trim the size of the canvas to fit the objects it contains. 
Original canvas (left); trimmed canvas (right) 
1. Choose Select > Deselect to view the document properties in the Property inspector. 
2. Click Fit Canvas in the Property inspector. 
To the top 


Crop a document 
Cropping deletes unwanted portions of a document. The canvas is resized to fit an area that you define. 


By default, cropping deletes objects that extend beyond the canvas boundaries. You can retain objects outside the canvas by changing a 
preference before cropping. 


1. Select the Crop tool 4 from the Tools panel or select Edit > Crop Document. 
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2. Drag a bounding box on the canvas. Adjust the crop handles until the bounding box surrounds the area that you want to keep. 
3. Double-click inside the bounding box or press Enter to crop the document. 
Fireworks resizes the canvas to the area you define and deletes objects beyond the edges of the canvas. 


Q To retain objects outside the canvas, deselect Delete Objects When Cropping on the Edit tab of the Preferences dialog box before 
cropping. 


Use rulers, guides, and the grid vee 


Rulers, guides, and the grid are drawing aids that help you to place and align objects. Guides are lines that you drag onto the document canvas 
from the rulers. You can use guides to mark important parts of your document, such as the margins and the document center point. The grid 
displays a system of horizontal and vertical lines on the canvas for precise placement. Guides and grids do not reside on a layer and are not 
exported with a document. 


You can use the following Fireworks extensions to work easily with guides: 

Guides Panel extension When you install this extension, a Guides panel appears in your workspace, which allows you to manipulate the guides 
within the document or export and import guides from a previously saved set of guides. This extension is available at 
http://www.adobe.com/go/learn_fw_usingguidespanel_en. 

Copy-Paste Guides extension This extension allows you to copy guides from one page and past them to another within the same document. 
Use this extension if your Fireworks document has multiple pages that need similar guides across pages. This extension is available at 
http://www.adobe.com/go/learn_fw_copypasteguides_en. 

Inherit Guides extension This extension allows you to copy guides from the master page or the current page and apply to all pages in the 
document. This extension is available at http:/www.adobe.com/go/learn_fw_inheritguides_en. 

Q To change grid size or guide and grid color, see Guides and Grids preferences. 


Show and hide rulers 
& Select View > Rulers. Vertical and horizontal rulers appear along the margins of the document window. Rulers measure in pixels. 


Create a horizontal or vertical guide 
1. Click and then drag from the corresponding ruler. 
2. Position the guide on the canvas and release the mouse button. 


Note: You can reposition the guide by dragging it again. 


Move a guide to a specific position 
1. Double-click the guide. 


2. Enter the new position in the Move Guide dialog box, and click OK. 


Show or hide guides or the grid 
& Select View > Guides > Show Guides or View > Grid > Show Grid. 


The selection is applied across all documents open in Fireworks. 


Snap objects to guides or to the grid 
& Select View > Guides > Snap To Guides or View > Grid > Snap To Grid. 


The selection is applied across all documents open in Fireworks. 


Lock or unlock all guides 
& Select View > Guides > Lock Guides. 


The selection is applied across all documents open in Fireworks. 


Remove a guide 
“* Drag the guide off the canvas. 


Display distance between guides 
& Press Shift when the pointer is placed between the guides. 


Q Press Shift while dragging guides into the canvas to display the distance between guides. 
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ž To the t 
Smart Guides ar 


Smart Guides are temporary snap-to guides that help you create, align, edit, and transform objects relative to other objects. To activate and snap 
to Smart Guides, choose View > Smart Guides, and then select Show Smart Guides and Snap To Smart Guides. 


You can use Smart Guides in the following ways: 


e When you create an object, use Smart Guides to position it relative to existing objects. The line, rectangle, ellipse, polygon, and autoshape 
tools display Smart Guides, as do the rectangular and circular slice tools. 


e When you move an object, use Smart Guides to align it with other objects. 
e When you transform an object, Smart Guides automatically appear to assist the transformation. 


Q To change when and how Smart Guides appear, set Smart Guide preferences. (See Guides and Grids preferences.) 
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Navigate, view, and preview documents 


Use document tabs to select documents 

Zoom and pan in and out 

Use view modes to manage the workspace 

Display multiple views of a document 

View documents as they appear on different platforms 
Preview in browser 


To the to 
Use document tabs to select documents 4 
When your document is maximized, use the document tabs that appear at the top of the document window to move among multiple open 
documents. The filename of each open document appears on a tab located above the view buttons. When you move the mouse over the tab, the 
location of the file is displayed as a tooltip. 


| 2 Original | Preview []2-up E4-up | 


a To thet 
Zoom and pan in and out sis 
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Zoom in, using preset increments 
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** Do one of the following: 


e Select the Zoom tool and click to specify the new center point inside the document window. Each click magnifies the image to the next preset 
magnification. 


e Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window. 


e Select Zoom In or a preset magnification from the View menu. 


Zoom out, using preset increments 
& Do one of the following: 


e Select the Zoom tool and Alt-click (Windows) or Option-click (Mac OS) inside the document window. Each click reduces the view to the next 
preset percentage. 


e Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window. 


e Select Zoom Out or a preset magnification from the View menu. 


Zoom in on a specific area 
1. Select the Zoom tool. 
2. Drag over the part of the image that you want to magnify. 
The size of the zoom selection box determines the precise magnification percentage, which is displayed in the Set Magnification box. 


Note: You cannot enter a magnification percentage in the Set Magnification box. 


Zoom out of a specific area 
“+ Alt-drag (Windows) or Option-drag (Mac OS) a selection area with the Zoom tool. 


Return to 100% magnification 
& Double-click the Zoom tool in the Tools panel. 


Pan around the document 
1. Select the Hand tool. 
2. Drag the hand pointer. 


As you pan beyond the canvas edge, the view continues to pan so that you can work with pixels along the canvas edge. 


Fit the document in the current view 
& Double-click the Hand tool in the Tools panel. 


x To thet 
Use view modes to manage the workspace D 


In the Tools panel, select from one of three view modes to control the layout of your workspace. 


© Standard Screen mode The default document window view. 


G Full Screen with Menus mode A maximized document window view set against a gray background. Menus, toolbars, scroll bars, and panels 
are visible. 


E Full Screen mode A maximized document window view set against a black background. No menus, toolbars, or title bars are visible. 
For more information, see the article on the Fireworkszone website. 


x s A To thet 
Display multiple views of a document ame 


Use multiple views to see one document at different magnifications simultaneously. Changes you make in one view are automatically reflected in 
all other views of the same document. 


1. Select Window > Duplicate Window. 


2. Select a zoom setting for the new window. 


View documents as they appear on different platforms anes 


Windows and Mac OSX Snow Leopard version 10.6 use a display gamma of 2.2, by default, for their monitors. Macintosh (pre-Snow Leopard) 
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uses a gamma value of 1.8. 
** Do one of the following: 
e In Windows, select View > Gamma 1.8 to view the document as displayed on a Macintosh (pre-Snow Leopard). 


e On the Macintosh®, select View > Gamma 1.8 to view the document as displayed in Mac (pre-Snow Leopard). 


š Š To the to 
Preview in browser p 


Select File > Preview In Browser, and choose one of the options. 


Preview All Pages In <primary browser> Ctrl+F12/Cmd+Shift+F12 You can preview interaction among all pages if they are linked to each 
other. 


Preview In <primary browser> F12 Previews the active Fireworks document in your primary browser. If you have only one browser installed on 
your computer, Fireworks uses it as the primary browser. If you have more than one browser installed, you can select a primary browser for 
displaying Fireworks documents using File > Preview in Browser > Set Primary Browser. 

Preview In Shift}Cmd+F12 Previews the active Fireworks document in your secondary browser. Before using this option, set your secondary 
browser using File > Preview In Browser > Set Secondary Browser. Navigate to and select the EXE/app file of your secondary browser. 
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Undo and repeat multiple actions 


Undo and redo actions 

Repeat actions 

Save actions for reuse 

Use the saved custom command 
Recovering unsaved files (Mac only) 


The History panel lists the most recent actions you performed in Fireworks. You can specify the number of steps in the Undo Steps field in the 
Fireworks Preferences dialog box. 


r To the t 
Undo and redo actions DE 


1. Select Window > History to open the History panel. 


2. Drag the Undo marker up or down. 


a To thet 
Repeat actions o the top 


1. Perform the actions. 

2. Do one of the following to highlight the actions you want to repeat in the History panel: 
e Click an action to highlight it. 
e Control-click (Windows) or Command-click (Mac OS) to highlight multiple individual actions. 
e Shift-click to highlight a continuous range of actions. 


3. Click the Replay button at the bottom of the History panel. 


A To thet 
Save actions for reuse ae 


1. Highlight the actions you want to save in the History panel. 
2. Click the Save button at the bottom of the panel. 


3. Enter a command name. 


To the t 
Use the saved custom command anne 


& Select the command name from the Commands menu. 


a 7 To thet 
Recovering unsaved files (Mac only) ater 


Unsaved files are saved on the desktop when a Fireworks session terminates abnormally. When you relaunch Fireworks, a message appears 
informing you of the folder on the desktop containing the unsaved files. The files are saved by default at Desktop\Fireworks Recovered\<date-time 
stamp>. 


Unsaved files that have not been named are saved using the naming convention untitled, untitled (1), untitled (2), and so on. The filenames 
correspond to the default names generated by Fireworks when creating the files. Unsaved files that have been named are saved with the same 
name. 


Recovery files are not generated in the following cases: 
e The Save operation resulted in the crash. 
e Insufficient memory to recover unsaved files. 
e DisableSaveOnCrash in the Adobe Fireworks CS5 Preferences file is set to True. 


e The open file was not edited when the crash occurred. 
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Disable recovery file generation 


1. Open the file Fireworks CS5 Preferences.txt from \Users\<username>\Library\Preferences\Adobe Fireworks CS5\<locale>\. 


2. Set DisableSaveOnCrash to True. 


Change default location for recovered files 


1. Open the file Fireworks CS5 Preferences.txt.The file can be located at \Users\<username>\Library\Preferences\Adobe Fireworks 
Cs5\<locale>\. 


2. Set the location using SaveOnCrashRecoveredFolderPath. You can use absolute path or relative path to define the location. 
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Workspace basics 


The Fireworks workspace 

The Start page 

About Fireworks panels 
Workspace overview 

Manage windows and panels 
Working with ConnectNow 

Save and switch workspaces 

The Tools panel 

The Property inspector 

Display and move toolbars (Windows only) 
Lock editing during save operation 


The Fireworks workspace Semone 
When you open a document in Adobe® Fireworks® for the first time, the workspace includes the Tools panel, Property inspector, menus, and 
other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups. The Property 
inspector appears along the bottom of the document by default and initially displays document properties. It then changes to display properties for 
a newly selected tool or currently selected object as you work in the document. The panels are initially docked in groups along the right side of the 
screen. The document window appears in the center of the program. 
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To the top 


The Start page 


When you start Fireworks without opening a document, the Fireworks Start page appears in the work environment. The Start page gives you quick 
access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. To disable 
the start page, click Don't Show Again when the Start page opens. 


à To thet 
About Fireworks panels ee 


Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on states, layers, 
symbols, color swatches, and more. Each panel is draggable, so you can group panels in custom arrangements. 


Optimize panel Lets you manage the settings that control size and type of a file and work with the color palette of the file or slice. 

Layers panel Organizes the structure of a document and contains options for creating, deleting, and manipulating layers. 

Common Library panel Displays the contents of the Common Library folder, which contains symbols. You can easily drag instances of these 
symbols from the Document Library panel to your document. 

Pages panel Displays the pages in the current file and contains options for manipulating pages. 

States panel Displays the states in the current file and includes options for creating animations. 
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History panel Lists commands you have recently used so that you can quickly undo and redo them. In addition, you can select multiple actions, 
and then save and reuse them as commands. 

Auto Shapes panel Contains Auto Shapes that are not displayed in the Tools panel. 

Styles panel Lets you store and reuse combinations of object characteristics or select a stock style. 

Document Library panel Contains graphic symbols, button symbols, and animation symbols that are already in the current Fireworks document. 
You can easily drag instances of these symbols from the Document Library panel to your document. You can make global changes to all instances 
by modifying only the symbol. 

URL panel Lets you create libraries containing frequently used URLs. 

Color Mixer panel Lets you create new colors to add to the color palette of the current document or to apply to selected objects. 

Swatches panel Manages the color palette of the current document. 

Info panel Provides information about the dimensions of selected objects and the exact coordinates of the pointer as you move it across the 
canvas. 

Behaviors panel Manages behaviors, which determine what hotspots and slices do in response to mouse movement. 

Find panel Lets you search for and replace elements such as text, URLs, fonts, and colors in a document or multiple documents. 

Align panel Contains controls for aligning and distributing objects on the canvas. 

Auto Shape Properties panel Lets you change the properties of an Auto Shape after you insert one into your document. 

Color Palette panel (Window > Others) Enables you to create and swap color palettes, export custom ACT color swatches, explore various color 
schemes and access commonly used controls for choosing colors. 

Image Editing (Window > Others) Organizes common tools and options used for bitmap editing into one panel. 

Path panel (Window > Others) Provides quick access to many path-related commands. 

Special Characters (Window > Others) Displays the special characters that can be used in text blocks. 

Symbol Properties Manages the customizable properties of graphic symbols. 


P To the to 
Workspace overview ' 
You create and manipulate your documents and files using various elements, such as panels, bars, and windows. Any arrangement of these 
elements is called a workspace. The workspaces of the different applications in Adobe® Creative Suite® 5 share the same appearance so that you 
can move between the applications easily. You can also adapt each application to the way you work by selecting from several preset workspaces 
or by creating one of your own. 


Although the default workspace layout varies in different products, you manipulate the elements much the same way in all of them. 
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i A « Ss 
Default Illustrator workspace 


A. Tabbed Document windows B. Application bar C. Workspace switcher D. Panel title bar E. Control panel F. Tools panel G. Collapse To 
Icons button H. Four panel groups in vertical dock 


e The Application bar across the top contains a workspace switcher, menus (Windows only), and other application controls. On the Mac for 
certain products, you can show or hide it using the Window menu. 


e The Tools panel contains tools for creating and editing images, artwork, page elements, and so on. Related tools are grouped. 


e The Control panel displays options for the currently selected tool. In Illustrator, the Control panel displays options for the currently selected 
object. (In Adobe Photoshop® this is known as the Options bar. In Adobe Flash®, Adobe Dreamweaver®, and Adobe Fireworks® this is 
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known as the Property Inspector and includes properties of the currently selected element.) 
e The Document window displays the file you're working on. Document windows can be tabbed and, in certain cases, grouped and docked. 


e Panels help you monitor and modify your work. Examples include the Timeline in Flash, the Brush panel in Illustrator, the Layers panel in 
Adobe Photoshop®, and the CSS Styles panel in Dreamweaver. Panels can be grouped, stacked, or docked. 


e The Application frame groups all the workspace elements in a single, integrated window that lets you treat the application as a single unit. 
When you move or resize the Application frame or any of its elements, all the elements within it respond to each other so none overlap. 
Panels don’t disappear when you switch applications or when you accidentally click out of the application. If you work with two or more 
applications, you can position each application side by side on the screen or on multiple monitors. 


If you are using a Mac and prefer the traditional, free-form user interface, you can turn off the Application frame. In Adobe Illustrator®, for 
example, select Window > Application Frame to toggle it on or off. (In Flash, the Application frame is on permanently for Mac, and 
Dreamweaver for Mac does not use an Application frame.) 


Hide or show all panels 


e (Illustrator, Adobe InCopy®, Adobe InDesign®, Photoshop, Fireworks)To hide or show all panels, including the Tools panel and Control 
panel, press Tab. 


e (Illustrator, InCopy, InDesign, Photoshop) To hide or show all panels except the Tools panel and Control panel, press Shift+Tab. 


Q You can temporarily display hidden panels if Auto-Show Hidden Panels is selected in Interface preferences. It’s always on in Illustrator. 
Move the pointer to the edge of the application window (Windows®) or to the edge of the monitor (Mac OS®) and hover over the strip that 
appears. 


e (Flash, Dreamweaver, Fireworks) To hide or show all panels, press F4. 


Display panel options 
“* Click the panel menu icon += in the upper-right corner of the panel. 
Q You can open a panel menu even when the panel is minimized. 


Q In Photoshop, you can change the font size of the text in panels and tool tips. In the Interface preferences, choose a size from the UI Font Size 
menu. 


(Illustrator) Adjust panel brightness 
“+ In User Interface preferences, move the Brightness slider. This control affects all panels, including the Control panel. 


Reconfigure the Tools panel 
You can display the tools in the Tools panel in a single column, or side by side in two columns. (This feature is not available in the Tools panel in 
Fireworks and Flash.) 


Q In InDesign and InCopy, you also can switch from single-column to double-column (or single-row) display by setting an option in Interface 
preferences. 


& Click the double arrow at the top of the Tools panel. 


. To thet 
Manage windows and panels oo 


You can create a custom workspace by moving and manipulating Document windows and panels. You can also save workspaces and switch 
among them. For Fireworks, renaming custom workspaces can lead to unexpected behavior. 


Note: The following examples use Photoshop for demonstration purposes. The workspace behaves the same in all the products. 


Rearrange, dock, or float document windows 
When you open more than one file, the Document windows are tabbed. 


e To rearrange the order of tabbed Document windows, drag a window's tab to a new location in the group. 
e To undock (float or untab) a Document window from a group of windows, drag the window's tab out of the group. 


Note: In Photoshop you can also choose Window > Arrange > Float in Window to float a single Document window, or Window > Arrange > 
Float All In Windows to float all of the Document windows at once. See tech note kb405298 for more information. 

Note: Dreamweaver does not support docking and undocking Document windows. Use the Document window’s Minimize button to create 
floating windows (Windows), or choose Window > Tile Vertically to create side-by-side Document windows. Search “Tile Vertically” in 
Dreamweaver Help for more information on this topic. The workflow is slightly different for Macintosh users. 


e To dock a Document window to a separate group of Document windows, drag the window into the group. 


e To create groups of stacked or tiled documents, drag the window to one of the drop zones along the top, bottom, or sides of another window. 
You can also select a layout for the group by using the Layout button on the Application bar. 
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Note: Some products do not support this functionality. However, your product may have Cascade and Tile commands in the Window menu 
to help you lay out your documents. 


e To switch to another document in a tabbed group when dragging a selection, drag the selection over the document's tab for a moment. 


Note: Some products do not support this functionality. 


Dock and undock panels 
A dock is a collection of panels or panel groups displayed together, generally in a vertical orientation. You dock and undock panels by moving 
them into and out of a dock. 


e To dock a panel, drag it by its tab into the dock, at the top, bottom, or in between other panels. 
e To dock a panel group, drag it by its title bar (the solid empty bar above the tabs) into the dock. 


e To remove a panel or panel group, drag it out of the dock by its tab or title bar. You can drag it into another dock or make it free-floating. 


NAVIGATOR 


Navigator panel now in its own dock 


Q You can prevent panels from filling all the space in a dock. Drag the bottom edge of the dock up so it no longer meets the edge of the 
workspace. 


Move panels 

As you move panels, you see blue highlighted drop zones, areas where you can move the panel. For example, you can move a panel up or down 
in a dock by dragging it to the narrow blue drop zone above or below another panel. If you drag to an area that is not a drop zone, the panel floats 
freely in the workspace. 


Note: The position of the mouse (rather than the position of the panel), activates the drop zone, so if you can't see the drop zone, try dragging 
the mouse to the place where the drop zone should be. 


e To move a panel, drag it by its tab. 


e To move a panel group, drag the title bar. 
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[Normal ; 

Locki a ee i 

Narrow blue drop zone indicates Color panel will be docked on its own above the Layers panel group. 
A. Title bar B. Tab C. Drop zone 


Q9 Press Ctrl (Windows) or Command (Mac OS) while moving a panel to prevent it from docking. Press Esc while moving the panel to cancel the 
operation. 


Add and remove panels 
If you remove all panels from a dock, the dock disappears. You can create a dock by moving panels to the right edge of the workspace until a drop 
zone appears. 


e To remove a panel, right-click (Windows) or Control-click (Mac) its tab and then select Close, or deselect it from the Window menu. 


e To add a panel, select it from the Window menu and dock it wherever you want. 


Manipulate panel groups 


e To move a panel into a group, drag the panel’s tab to the highlighted drop zone in the group. 


anel group | 


Adding a panel toap 


e To rearrange panels in a group, drag a panel’s tab to a new location in the group. 
e To remove a panel from a group so that it floats freely, drag the panel by its tab outside the group. 


e To move a group, drag the title bar (the area above the tabs). 


Stack floating panels 
When you drag a panel out of its dock but not into a drop zone, the panel floats freely. The floating panel allows you to position it anywhere in the 
workspace. You can stack floating panels or panel groups so that they move as a unit when you drag the topmost title bar. 
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Free-floating stacked panels 


e To stack floating panels, drag a panel by its tab to the drop zone at the bottom of another panel. 
e To change the stacking order, drag a panel up or down by its tab. 
Note: Be sure to release the tab over the narrow drop zone between panels, rather than the broad drop zone in a title bar. 


e To remove a panel or panel group from the stack, so that it floats by itself, drag it out by its tab or title bar. 


Resize panels 


e To minimize or maximize a panel, panel group, or stack of panels, double-click a tab. You can also double-click the tab area (the empty 
space next to the tabs). 


e To resize a panel, drag any side of the panel. Some panels, such as the Color panel in Photoshop, cannot be resized by dragging. 
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Collapse and expand panel icons 
You can collapse panels to icons to reduce clutter on the workspace. In some cases, panels are collapsed to icons in the default workspace. 
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Panels expanded from icons 


e To collapse or expand all panel icons in a column, click the double arrow at the top of the dock. 
e To expand a single panel icon, click it. 


e To resize panel icons so that you see only the icons (and not the labels), adjust the width of the dock until the text disappears. To display the 
icon text again, make the dock wider. 


e To collapse an expanded panel back to its icon, click its tab, its icon, or the double arrow in the panel's title bar. 


Q In some products, if you select Auto-Collapse Icon Panels from the Interface or User Interface Options preferences, an expanded panel 
icon collapses automatically when you click away from it. 


e To add a floating panel or panel group to an icon dock, drag it in by its tab or title bar. (Panels are automatically collapsed to icons when 
added to an icon dock.) 


e To move a panel icon (or panel icon group), drag the icon. You can drag panel icons up and down in the dock, into other docks (where they 
appear in the panel style of that dock), or outside the dock (where they appear as floating icons). 


Working with ConnectNow To the top 


Adobe® ConnectNow provides you with a secure, personal online meeting room where you can meet and collaborate with others via the web in 
real time. With ConnectNow, you can share and annotate your computer screen, send chat messages, and communicate using integrated audio. 
You can also broadcast live video, share files, capture meeting notes, and control an attendee's computer. 


You can access ConnectNow directly from the application interface. 
1. Choose File > Share My Screen. 


2. In the Sign In to Adobe CS Live dialog box, enter your email address and password, and click Sign In. If you don’t have an Adobe ID, click 
the Create Adobe ID button. 


3. To share your screen, click the Share My Computer Screen button at the center of the ConnectNow application window. 
For complete instructions on using ConnectNow, see Adobe ConnectNow Help. 


For a video tutorial about using ConnectNow, see Using ConnectNow to share your screen (7:12). (This demonstration is in Dreamweaver.) 


i To the to 
Save and switch workspaces j 
By saving the current size and position of panels as a named workspace, you can restore that workspace even if you move or close a panel. The 
names of saved workspaces appear in the workspace switcher in the Application bar. 
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Save a custom workspace 
1. With the workspace in the configuration you want to save, do one of the following: 
e (Illustrator) Choose Window > Workspace > Save Workspace. 
e (Photoshop, InDesign, InCopy) Choose Window > Workspace > New Workspace. 
e (Dreamweaver) Choose Window > Workspace Layout > New Workspace. 
e (Flash) Choose New Workspace from the workspace switcher in the Application bar. 
e (Fireworks) Choose Save Current from the workspace switcher in the Application bar. 
2. Type aname for the workspace. 
3. (Photoshop, InDesign) Under Capture, select one or more options: 
Panel Locations Saves the current panel locations (InDesign only). 
Keyboard shortcuts Saves the current set of keyboard shortcuts (Photoshop only). 


Menus or Menu Customization Saves the current set of menus. 


Display or switch workspaces 
& Select a workspace from the workspace switcher in the Application bar. 


Q In Photoshop, you can assign keyboard shortcuts to each workspace to navigate among them quickly. 


Delete a custom workspace 


e Select Manage Workspaces from the workspace switcher in the Application bar, select the workspace, and then click Delete. (The option is 
not available in Fireworks.) 


e (Photoshop, InDesign, InCopy) Select Delete Workspace from the workspace switcher. 
e (Illustrator) Choose Window > Workspace > Manage Workspaces, select the workspace, and then click the Delete icon. 


e (Photoshop, InDesign) Choose Window > Workspace >Delete Workspace, select the workspace, and then click Delete. 


Restore the default workspace 


1. Select the Default or Essentials workspace from the workspace switcher in the application bar. For Fireworks, see the article 
http:/www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html. 


Note: In Dreamweaver, Designer is the default workspace. 


2. For Fireworks (Windows), delete these folders: 
Windows Vista \\Users\<username>\AppData\Roaming\Adobe\Fireworks CS4\ 


Windows XP \\Documents and Settings\<username>\Application Data\Adobe\Fireworks CS4 


3. (Photoshop, InDesign, InCopy) Select Window > Workspace > Reset [Workspace Name]. 


(Photoshop) Restore a saved workspace arrangement 
In Photoshop, workspaces automatically appear as you last arranged them, but you can restore the original, saved arrangement of panels. 


e To restore an individual workspace, choose Window > Workspace > Reset Workspace Name. 

e To restore all the workspaces installed with Photoshop, click Restore Default Workspaces in the Interface preferences. 
Q To rearrange the order of workspaces in the application bar, drag them. 
To the to 
The Tools panel £ 


The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. When you select a tool, the Property inspector 
displays tool options. 


ools pane 


Display tool options in the Property inspector 
& With a tool selected, choose Select > Deselect to deselect all objects on the canvas. 


Select a tool from a tool group 
A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group. 
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v 4 Pen tool (P) 
A Vector Path tool (P) 
y Redraw Path tool (P) 


1. Click the tool icon and hold down the mouse button. 


2. Drag the pointer to highlight the tool you want, and release the mouse button. 


Q To quickly select a hidden tool, repeatedly press the group keyboard shortcut until the tool you want appears. (Shortcuts are displayed in 
parentheses next to tool names.) 


ʻ To the to 
The Property inspector f 
The Property inspector is a context-sensitive panel that displays current selection properties, current tool options, or document properties. By 
default, the Property inspector is docked at the bottom of the workspace. The Property inspector can be open at half height, displaying two rows of 
properties, or at full height, displaying four rows. You can also fully collapse the Property inspector while leaving it in the workspace. 

Note: In Windows, the Options menu is available only when the Property inspector is docked. 


Undock the Property inspector 
“* Drag the panel tab to another part of the workspace. 


Dock the Property inspector at the bottom of the workspace 
“* Drag the panel tab to the bottom of the screen. 


Expand or collapse the Property inspector 
& Do one of the following: 
e Double-click the panel tab. 
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e Click the arrow in the upper-left corner of the panel. 


Display and move toolbars (Windows only) caer 


Show or hide a toolbar 

“* Choose Window > Toolbars, and select either of the following: 

Main Displays a toolbar above the document window with buttons for common file commands such as Open, Save, Print, and 

Copy. Modify Displays a toolbar below the document window with buttons for object grouping, arrangement, alignment, and rotation commands. 


Undock a toolbar 
“* Drag the toolbar away from its docked location. 


Dock a toolbar (Windows only) 
** Drag the toolbar onto a docking area at the top of the application window until the placement preview rectangle appears. 


ae 7 ʻ To the to 
Lock editing during save operation p 
Editing a document during a save operation causes Fireworks to stop responding. When you set AsynchronousSave to true in the preferences.txt 
file, Fireworks locks the file for editing until the save operation completes. You can however, continue to work on other open Fireworks 
documents. Objects that get updated during the save operation do not get updated in the AsynchronousSave mode. Set AsynchronousSave=false 
in the preferences.txt file when working with such objects. For example, the autoshape Save Time Stamp is not updated when 
AsynchronousSave=True. By default, the asynchronous option is set to true for Windows, and false for Mac. 

1. Locate preferences.txt file. In Windows, the file is present in \\<user name>\Application Data\Adobe\Fireworks CS5\English\Fireworks CS5 

Preferences. In Mac OS, the file is present in /<user name>/Library/Preferences/Adobe Fireworks CS5/en/Fireworks CS5 Preferences. 
2. Set AsynchronousSave = true in the file. 


3. Save the file. 
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Selecting and transforming objects 
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9-slice scaling 


9-slicing symbols 
9-slicing standard objects 


9-slice scaling lets you scale vector and bitmap objects without distorting their geometry, retaining the look of key elements like text or rounded 
corners. 


9-slice scaling cannot be applied to the following: 
e Text 
e Symbol containing text 
e Group containing text that is rotated/distorted/skewed 


Note: Ifa group or symbol containing text is 9 slice-scaled, the text scales without using 9 slice-scaling. 


Fireworks provides two methods of 9-slice scaling: symbol scaling with permanent slicing guides you can readjust, and standard scaling with 
temporary guides you apply once. Symbol scaling is ideal for objects you plan to reuse many times. Standard scaling is ideal for quick, one-time 
adjustments to bitmap objects or basic shapes that you’re incorporating into design mockups. 


For a video tutorial on creating scalable objects with 9-slice scaling, see www.adobe.com/go/|rvid4036_fw. For a demonstrative example of using 9- 
slice scaling, see the article by Sarthak Singhal at http://www.adobe.com/go/learn_fw_9slicescaling_en. 


9 To achieve the most flexible scaling, make the center slice as large as possible. (When you dramatically shrink an object, Fireworks limits 
surrounding slices to their original size.) 


RE To thet 
9-slicing symbols meee 
Apply 9-slice guides to a symbol 

1. eDouble-click the symbol or button to enter symbol-editing mode. 

2. In the Properties panel, select Enable for 9-slice Scaling Guides. 


3. Move the guides and place them appropriately on the button or symbol. Make sure that the parts of the symbol that you don't want to be 
distorted when scaling (for example the corners) are outside the guides. 


9-slice scaling guides positioned so that corners aren't distorted when the button is resized. 


4. (Optional) Lock the guides: In the Properties panel, select Lock for 9-slice scaling guides. 
5. To return to the containing page, click the page icon at the top of the document panel . 


6. Resize the symbol as needed by using the Scale tool 5h, 


The button scales without distorting corner shape. 


Q After applying 9-slice guides to a symbol, you can nest it in the protected regions of other 9-sliced symbols, creating complex objects that 
scale perfectly. 


Scale in one dimension with three slices 
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If you plan to scale an object in only one dimension, you can use three slices instead of nine. 
*“* Complete the standard 9-slice procedure, but in step 3 do one of the following: 
e For vertical scaling, drag the horizontal slicing guides to the edge of the object. 


e For horizontal scaling, drag the vertical guides to the edge. 


Identify symbols that use 9-slice scaling 
& In the Document Library panel, double-click a symbol icon to enter symbol-editing mode, and look for slicing guides. 


9-slicing standard objects To the top 


The 9-Slice Scaling tool creates temporary slicing guides that help you scale objects without distorting their geometry. This tool is helpful for 
quickly scaling bitmap objects or basic shapes for design prototypes and mockups. 


Guides you create with the 9-Slice Scaling tool disappear after a single use. For more permanent slicing guides that you can reuse multiple times, 
see 9-slicing symbols. 


1. On the canvas, select a bitmap object or vector shape. 
2. In the Tools panel, select the 9-Slice Scaling tool E. 


Note: Ifyou selected an Auto Shape in step 1, Fireworks prompts you to ungroup it. Do so only if you have finished adjusting Auto Shape 
control points. 


3. On the canvas, arrange the slicing guides to best retain the geometry of the object. (For details, see 9-slice scaling.) 
4. Transform the object by dragging a corner or side handle. 


More Help topics 


O 


Legal Notices | Online Privacy Policy 
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Edit selected objects 


Move, duplicate, or delete objects 

Transform and distort objects and selections 
Rotate or flip objects 

Numerically transform objects 


Move, duplicate, or delete objects PAARE 


Move a selection 
** Do one of the following: 


e Drag it with the Pointer, Subselection, or Select Behind tool. 

e Press any arrow key to move the selection in 1-pixel increments. 

e Hold down Shift while pressing any arrow key to move the selection in 10-pixel increments. 

e Inthe Property inspector, enter the x and y coordinates for the location of the upper-left corner of the selection. 


e Enter the object's x and y coordinates in the Info panel. If the X and Y boxes aren't visible, drag the bottom edge of the panel. 


Move or copy selected objects by pasting 
1. Select an object or multiple objects. 
2. Select Edit > Cut or Edit > Copy. 
3. Select Edit > Paste. 


Duplicate one or more selected objects 
& Select Edit > Duplicate. 


As you repeat the command, duplicates of the selected object appear in a cascading arrangement from the original. Duplicates appear 10 pixels 
lower and 10 pixels to the right of the previous duplicate. The most recently duplicated object becomes the selected object. 


Clone a selection 
“ Select Edit > Clone. 


The clone of the selection is stacked precisely in front of the original and becomes the selected object. 
Note: To move a selected clone away from the original with pixel-by-pixel precision, use the arrow keys or Shift+arrow keys. This is a convenient 
way to maintain a specific distance between clones or to maintain the vertical or horizontal alignment of the clones. 
Delete selected objects 
** Do one of the following: 
e Press Delete or Backspace. 
e Select Edit > Clear or Edit > Cut. 


e Right-click (Windows) or Control-click (Mac OS) the object and select Edit > Cut from the context menu. 


Cancel or deselect a selection 
& Do one of the following: 


e Choose Select > Deselect. 
e Click anywhere in the image outside the selected area if you are using the Marquee, Oval Marquee, or Lasso tool. 


e Press Escape. 


A à ei To thet 
Transform and distort objects and selections [ere 
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Transform a selected object, group, or a pixel selection by using the Scale, Skew, and Distort tools and menu commands: 


Eh Scale enlarges or reduces an object. 
iz Skew slants an object along a specified axis. 
= | Distort moves the sides or corners of an object in the direction 


you drag a selection handle while the tool is active. This is helpful 
in creating a 3D look. 


When you select any transformation tool or Transform menu command, Adobe® Fireworks® displays transform handles around selected objects. 


ce | & | 


Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally 


Transform selected objects by using the transform handles 
1. Select a transformation tool. 
As you move the pointer on or near the selection handles, the pointer changes to indicate the current transformation. 
2. Do one of the following: 
e Place the pointer near a corner point and then drag to rotate. 
e Drag a transform handle to transform according to the active transformation tool. 


3. Double-click inside the window or press Enter to apply the changes. 


Resize a selected object 
Scaling (also called resizing) an object enlarges or reduces it horizontally, vertically, or in both directions. For information on scale attributes, see 
Thierry Lorey's article. 


1. Do one of the following: 

e Select the Scale tool E2 , 

e Select Modify > Transform > Scale. 
2. Drag the transform handles: 


e To scale the object both horizontally and vertically, drag a corner handle. Proportions are constrained if you press the Shift key as you 
scale. 


e To scale the object horizontally or vertically, drag a side handle. 


e To scale the object from the center, press Alt (Windows), or Option (Mac) while dragging any handle. 


Resize/scale effects and strokes when the associated object is resized 
You can choose to scale effects and strokes applied to objects proportionately when objects are resized. 


Note: For both normal scaling and 9-slice scaling, strokes are scaled using the settings in the Preferences dialog box, or the Info panel. 
** Do one of the following: 


e Select Edit > Preferences (Windows), or Fireworks > Preferences (Mac OS). In the General category, select Scale Strokes and Effects. 
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e Select Window > Info. In the Options menu for the Info panel, select Scale Attributes. 


Resize all selected objects 
You can select objects on your canvas and resize them horizontally, vertically, or in both directions. 


1. Select the objects on the canvas using the Pointer tool. 
2. Select Commands > Resize Selected Objects. 


3. Use the resize controls on the dialog box to resize the objects horizontally or vertically, and click Apply. 
Note: Select the larger or smaller controls to adjust the resizing increments. 


Skew objects 
Skew an object to transform it by slanting it along the horizontal axis, the vertical axis, or both. 


1. Do one of the following to display the transform handles: 
e Select the Skew tool DŻ, 
e Select Modify > Transform > Skew. 
2. Drag a handle to skew the object. 
Q To create the illusion of perspective, drag a corner point. 


3. Double-click the document, or press Enter. 


Distort objects 
Change the size and proportions of an object by dragging a selection handle with the Distort tool. 


1. Do one of the following to display the transform handles: 
e Select the Distort tool F . 
e Select Modify > Transform > Distort. 

2. Drag a handle to distort the object. 


3. Double-click inside the window or press Enter. 


Rotate or flip objects To the top 


A rotated or flipped object pivots on its center point. 


Q To create the illusion of perspective, suggesting that an object has rotated in three dimensions, see Skew objects. 


Rotate a selected object 90° or 180° 
“* Select Modify > Transform and select a Rotate command from the submenu. 


Rotate a selected object by dragging 
1. Select any transformation tool. 


2. Move the pointer outside the object until the rotation pointer appears. 


3. Drag to rotate the object. 
Q9 To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer. 


4. Double-click inside the window or press Enter to apply the changes. 


Relocate the axis of rotation 
& Drag the center point away from the center. 
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Reset the axis of rotation to the center of the selection 
** Do one of the following: 


e Double-click the center point. 


e Press Escape to deselect the object, and then select it again. 


Flip an object while maintaining relative position 
& Select Modify > Transform > Flip Horizontal or Flip Vertical. 


5 r To thet 
Numerically transform objects AEE 


Instead of dragging an object to scale, resize, or rotate it, you can transform it by entering specific values. Use the Property inspector, Info panel, 
or Numeric Transform command. 


& In the Property inspector or Info panel, enter new width (W) or height (H) measurements. 


Note: Ifthe W and H boxes aren't visible in the Property inspector, click the expander arrow to see all properties. 


Scale or rotate selected objects by using the Numeric Transform command 
1. Select Modify > Transform > Numeric Transform. 
. From the pop-up menu, select the type of transformation to perform. 


. Select Constrain Proportions to maintain horizontal and vertical proportions when scaling or resizing a selection. 


2 
3 
4. Select Scale Attributes to transform the fill, stroke, and effects of the object along with the object itself. 
5. Deselect Scale Attributes to transform only the path. 

6 


. Type numeric values to transform the selection, and then click OK. 


View numeric transformation information 
Use the Info panel to view numeric transformation information for the currently selected object. The information updates as you edit the object. 


& Select Window > Info. 


More Help topics 
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Modify a selection 


Add to a selection 

Deselect an object while leaving other objects selected 
Select everything on every layer in the document 
Deselect all selected objects 

Hide the path selection feedback of a selected object 
Hide selected objects 

Show all objects 


After you select a single object, you can add objects to the selection and deselect objects that are selected. Using a single command, you can 
select or deselect everything on every layer in a document. You can also hide the selection path so that you can edit a selected object while 
viewing it as it appears on the web or in print. 


s To thet 
Add to a selection mee 
& Hold down Shift while clicking additional objects with the Pointer, Subselection, or Select Behind tool. 

z a Fi . To the top 
Deselect an object while leaving other objects selected 
& Hold down Shift while clicking the selected object. 

. g To thet 
Select everything on every layer in the document EEA 
& Choose Select > Select All. 
Note: Select All does not select hidden objects. 

To the top 


Deselect all selected objects 
& Choose Select > Deselect. 


Note: Deselect the Single Layer Editing preference to select all visible objects on all layers in a document. When you select the Single Layer 
Editing preference, only objects on the current layer are selected. For more information, see Organize layers. 


3 a To the to 
Hide the path selection feedback of a selected object P 
& Select View > Edges. 

Note: You can use the Layers panel or the Property inspector to identify the selected object when the outline and points are hidden. 

7 ; To thet 
Hide selected objects E SRE 
& Select View > Hide Selection. 

Note: Hidden objects are not exported. (This does not apply to slice and hotspot web objects on the Web Layer.) 
To the top 


Show all objects 
Select View > Show All. 


Note: To hide objects regardless of whether they are selected, click or drag along the Eye column in the Layers panel. 
More Help topics 
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Organize multiple objects 


Options for organizing objects 
Group or ungroup objects 
Stack the order of objects 
Align objects 


a To the to 
Options for organizing objects P 
Group objects Treats objects as one or protects each object's relationship to the others in the group. 

Stack the order of objects Arranges objects behind or in front of other objects. 
Align selected objects Aligns objects to an area of the canvas or to a vertical or horizontal axis. 
To the top 


Group or ungroup objects 


Group individual selected objects and then manipulate them as if they are a single object. For example, after drawing the petals of a flower as 
individual objects, group them to select and move the entire flower as a single object. 


You can edit groups without ungrouping them. You can select an individual object in a group for editing without ungrouping the objects. You can 
also ungroup the objects at any time. 


& Select Modify > Group or Modify > Ungroup. 


Select objects within groups 


To work with individual objects within a group, either ungroup the objects or use the Subselection tool È to select individual objects while leaving 
the group intact. 


Modifying the attributes of a subselected object changes only the subselected object. Moving a subselected object to another layer removes the 
object from the group. 


Select an object that is part of a group 
& Select the Subselection tool and click the object or drag a selection area around it. To add objects to or remove them from the selection, hold 
down Shift as you click or drag. 


Select the group that contains a subselected object 
& Do one of the following: 


e Right-click (Windows) or Control-click (Mac OS) anywhere in the group and choose Select > Superselect from the context menu. 


e Choose Select > Superselect. 


Select all objects within a selected group 
** Do one of the following: 


e Right-click (Windows) or Control-click (Mac OS) anywhere on the group and choose Select > Subselect from the context menu. 


e Choose Select > Subselect. 


Stack the order of objects To the top 


Within a layer, Fireworks stacks objects based on the order in which they were created, placing the most recently created object on the top. The 
stacking order of objects determines how they appear when they overlap. 


Layers also affect the stacking order. For example, suppose a document has two layers named Layer 1 and Layer 2. If Layer 1 is listed below 
Layer 2 on the Layers panel, then everything on Layer 2 appears in front of everything on Layer 1. 


You can change the order of layers by dragging the layer in the Layers panel to a new position. For more information, see Organize layers. 


Change the stacking order of a selected object or group within a layer 


+ To move the object or group to the top or bottom of the stacking order, select Modify > Arrange > Bring to Front or Send to Back. 
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e To move the object or group up or down one position in the stacking order, select Modify > Arrange > Bring Forward or Send Backward. 


If more than one object or group is selected, the objects move in front of or behind all unselected objects while maintaining their order 
relative to one another. 


Arrange objects among layers 
The Layers panel offers another dimension of organizational control. To move selected objects from one layer to another, drag the object 
thumbnail or the blue selection indicator to another layer. 


Align objects To the top 


You can apply one or more Align commands to selected objects. 


Q For quick access to these commands, use the Align panel (Window > Align). 


Align selected objects 

1. Select Modify > Align. 

2. Choose one of the following options: 
Left Aligns the objects to the leftmost selected object. 
Center Vertical Aligns the center points of the objects along a vertical axis. 
Right Aligns the objects to the rightmost selected object. 
Top Aligns the objects to the topmost selected object. 
Center Horizontal Aligns the center points of the objects along a horizontal axis. 
Bottom Aligns the objects to the bottommost selected object. 


For more information on aligning objects, see Aligning and Distributing Objects tutorial. 


Align autoshapes 
To set the alignment options for autoshapes, use the corresponding API. For example: 


smartShape.elem.elements[0].pathAttributes.brushPlacement="center"; 
smartShape.elem.elements[0].pathAttributes.brushPlacement="inside"; 
smartShape.elem.elements[0].pathAttributes.brushPlacement="outside"; 
smartShape.elem.elements[0].pathAttributes.fillOnTop=false; 


The specified settings are used for the corresponding auto shape only. Strokes and paths drawn after applying these settings to an autoshape are 
used for future autoshapes, but not for objects. 


Evenly distribute the widths or heights of three or more selected objects 
& Select Modify > Align > Distribute Widths or Modify > Align > Distribute Heights. 


More Help topics 
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Select objects 


Select objects by clicking 

Select objects by dragging 

Move or modify objects with the Subselection tool 
Select an object that is behind other objects 
Selection information in the Property inspector 


Before you can do anything with any object on the canvas, select it. This applies to a vector object, path, or points; a text block, word, or letter; a 
slice or hotspot; an instance; or a bitmap object. To select an object, use the Layers panel or a selection tool. 


The Layers panel Displays each object. You can click an object in the Layers panel to select it when the panel is open and layers are expanded. 
The selection tools Each has a specific purpose: 


$ The Pointer tool selects objects when you click the objects or 
drag a selection area around them. 


È The Subselection tool selects an individual object in a group or 
the points of a vector object. 


a The Select Behind tool selects an object that is behind another 
object. 
al The Export Area tool selects an area to be exported as a 


separate file. 


Select objects by clicking To the top 


** Do one of the following: 
e Move the Pointer tool over the object's path or bounding box and click. 
e Click the object's stroke or fill. 
e Select the object in the Layers panel. 


Q To preview what is selected when you click an object beneath the pointer on the canvas, select the Mouse Highlight option in the Editing 
category of the Preferences dialog box. 


i i To the to 
Select objects by dragging p 
“* Drag the Pointer tool to include one or more objects in the selection area. 
To the top 


Move or modify objects with the Subselection tool 
Use the Subselection tool to select, move, or modify points on a vector path or an object that is part of a group. 


1. Select the Subselection tool. 
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2. Make a selection. 
3. Do one of the following: 
e To modify an object, drag one of its points or selection handles. 


e To move the entire object, drag anywhere in the object except a point or selection handle. 


n , x a To the to 
Select an object that is behind other objects p 
& Click the Select Behind tool repeatedly over the stacked objects, starting with the top until you select the object you want. 
Note: You also can select a hard-to-reach object by clicking it in the Layers panel when the layers are expanded. 
To the top 


Selection information in the Property inspector 


When you select an object, the Property inspector identifies the selection. The upper left area of the Property inspector contains a description of 
the item being inspected, and the number of selected objects if multiple objects are selected. The Property inspector also provides a box for 
entering a name for the items selected. 


Note: The name appears in the title bar of the document whenever you select this item. For slices and buttons, the name is the filename when 
exported. 


(Windows only) If the status bar is turned on, selected objects are identified in the status bar at the bottom of the document window. 


PROPERTIES 
Rectangle © I soid a217] None ~| D| 100 | + [norma ~| | mamaa 
Rectangle Edge: |Anti-Alias ~ DO) Ede: Fitters: |+] ~ Combine 
at 105 |X: 284 Texture: Grain vio Ja G No Style {y 
Hi es |Y: 153 Transparen 4 Roundness: 0 |M% v al 


Property Inspector 


More Help topics 
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Select pixels 


Options for bitmap selection tools 

Create pixel selection marquees 

Adjust selection marquees 

Convert, transfer, or save marquee selections 
Copy or move the contents of a marquee selection 


You can edit pixels over an entire canvas or select one of the selection tools to constrain your editing to a particular area of an image: 


e= The Marquee tool selects a rectangular area of pixels in an 
image. For more information, see Thierry Lorey's article. 


oo The Oval Marquee tool selects an elliptical area of pixels in an 
g image. 
p The Lasso tool selects a free-form area of pixels in an image. 
y The Polygon Lasso tool selects a straight-edged free-form area of 


pixels in an image. 


K The Magic Wand tool selects an area of similarly colored pixels in 
an image. 


The pixel selection tools draw selection marquees that define the area of selected pixels. After you draw the selection marquee, manipulate it by 
moving it, adding to it, or basing another selection on it. You can edit the pixels inside the selection, apply filters to the pixels, or erase pixels 
without affecting the pixels beyond the selection. You can also create a floating selection of pixels that you can edit, move, cut, or copy. 


Options for bitmap selection tools oe 


Various options are available for the tools used to select bitmaps. 


Edge options 

Hard Creates a marquee selection with a defined edge. 
Anti-alias Prevents jagged edges in the marquee selection. 
Feather Lets you soften the edge of the pixel selection. 


Marquee or Oval Marquee style options 

Normal Lets you create a marquee in which the height and width are independent of each other. 

Fixed Ratio Constrains the height and width to defined ratios. 

Fixed Size Sets the height and width to a defined dimension. 

Note: The Magic Wand tool also has a Tolerance setting. For more information, see Select pixels in areas of similar color. 


à a To thet 
Create pixel selection marquees EERE 


Use tools in the Bitmap section of the Tools panel to draw a marquee around specific pixel areas of a bitmap image. 


Note: To change the settings for your selection while using one of these tools, select the Live marquee box before making your selection. 


Select a rectangular or elliptical area of pixels 
1. Select the Marquee or Oval Marquee tool. 
2. Set the Style and Edge options in the Property inspector. 
3. Drag to draw a selection marquee, which defines the pixel selection. 


e To draw additional square or circular marquees, hold down Shift as you drag the Marquee or Oval Marquee tool. If Live marquee is 
turned on while you make a series of selections, the Live marquee feature affects only the last selection in the series. 


e To draw a marquee from a center point, deselect any other active marquees, and then hold down Alt (Windows) or Option (Mac OS) as 
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you draw. 


Select a free-form area of pixels 
1. Select the Lasso tool. 
2. Select an Edge option in the Property inspector. 


3. Drag the pointer around the pixels you want to select. 


Plot points to create a marquee selection 
Use the Polygon Lasso tool to select a polygonal area of specific pixels in a bitmap image. 


1. Select the Polygon Lasso tool. 
2. Select an Edge option in the Property inspector. 
3. Outline the selection by clicking to plot points around the perimeter of the object or area. 
Hold down Shift to constrain Polygon Lasso marquee segments to 45° increments. 
4. Do one of the following to close the polygon: 
e Click the starting point. 


e Double-click in the workspace. 


Select pixels in areas of similar color 
1. Select the Magic Wand tool. 
2. Select an Edge option. 
3. Set the tolerance level by dragging the tolerance slider in the Property inspector. 


Tolerance represents the tonal range of colors that are selected when you click a pixel with the Magic Wand. If you enter 0 and click a pixel, 
only adjacent pixels of the same tone are selected. If you enter 65, a wider range of tones is selected. 


4. Click the area of color you want to select. 


A marquee appears around the selected range of pixels. 


d 


Pixels selected with a lower tolerance (above), then a higher tolerance (below) 


Select similar colors throughout a document 


50 


1. Select an area of color with a marquee or lasso tool, or with the Magic Wand tool. 
2. Choose Select > Select Similar. 


One or more marquees show all areas containing the selected range of pixels. This depends on the current Tolerance setting in the Property 
inspector for the Magic Wand tool. 


Note: To adjust the tolerance for the Select Similar command, select the Magic Wand tool and change the Tolerance setting in the Property 
inspector before using the command. Or, select the Live marquee box to change the Tolerance setting while using the Magic Wand tool. 


Create a selection based on opaque areas of objects 
With a bitmap object selected, you can create a pixel selection based on the opacity of any object or mask in the Layers panel. 


1. Select a bitmap object on the canvas. 
2. In the Layers panel, position the pointer over the thumbnail of the object you want to use to create the pixel selection. 
3. Hold down Alt (Windows) or Option (Mac OS). 
The pointer changes to indicate you are about to select the alpha channel (the opaque area) of the object. 
4. Click the thumbnail. 
A new pixel selection is created on the selected bitmap. 
5. (Optional) To add to the selection, Alt-Shift-click (Windows) or Option-Shift-click (Mac OS) another object in the Layers panel. 


Q To subtract from the selection, Ctrl-Shift-click objects. 


Remove a selection marquee 
You can remove a selection marquee without affecting the document. 


** Do one of the following: 
e Draw another marquee. 
e Click outside the current selection with a marquee or lasso tool. 


e Press Escape. 


g P To the to 
Adjust selection marquees p 


Reposition a selection while creating it 
1. Begin dragging to draw the selection. 
2. Without releasing the mouse button, hold down the spacebar. 
3. Drag the marquee to another location on the canvas. 
4. While still holding down the mouse button, release the spacebar. 
5 


. Continue dragging to draw the selection. 


Move an existing marquee 
** Do one of the following: 


e Drag the marquee with the Marquee, Lasso, or Magic Wand tool. 
e Use the arrow keys to nudge the marquee in 1-pixel increments. 


e Press Shift and use the arrow keys to move the marquee in 10-pixel increments. 


Add pixels to an existing selection 
1. Select any bitmap selection tool. 
2. Hold down Shift and draw additional selection marquees. 
3. Repeat steps 1 and 2 with any bitmap selection tool to continue adding to the selection. 


Overlapping marquees join to form a contiguous marquee. 


Subtract pixels from a selection 
& Hold down Alt (Windows) or Option (Mac OS) and use a bitmap selection tool to select the pixel area you want to remove. 
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Select part of an existing marquee 
Select part of an existing marquee by drawing a new marquee that overlaps the original. 


1. Hold down Alt+Shift (Windows) or Option+Shift (Mac OS) while creating a marquee selection that overlaps the original marquee. 
2. Release the mouse button. 


Only pixels in the overlapping area of the two marquees are selected. 


Inverse a pixel selection 
Using a current pixel selection, you can create another pixel selection that selects all currently deselected pixels. 


1. Make a pixel selection, using any bitmap selection tool. 


2. Choose Select > Select Inverse to select all pixels that were not originally selected. 


Feather a pixel selection 
Feathering creates a see-through effect for the selected pixels. 


1. Choose Select > Feather. 
2. Enter a Feather amount in the Feather dialog box. 
3. If necessary, change the number in the Feather dialog box to adjust the feather amount. 


Q To view the appearance of the feathered selection without the surrounding pixels, choose Select > Select Inverse, and then press Delete. 


Expand or contract a marquee 
After you draw a marquee to select pixels, you can expand or contract its border. 


1. After drawing the marquee, choose Select > Expand Marquee. 


2. Enter the number of pixels by which you want to expand or contract the border of the marquee, and click OK. 


Select an area around an existing marquee 
To add special graphic effects to a marquee, create an additional marquee that frames the existing marquee. 


1. After drawing a marquee, choose Select > Border Marquee. 


2. Enter the width of the marquee that you want to place around the existing marquee, and click OK. 


Smooth the border of a marquee 
Eliminate any excess pixels that appear along the border of a pixel selection or marquee after using the Magic Wand tool. 


1. Choose Select > Smooth Marquee. 


2. Enter a sample radius to specify the desired degree of smoothing, and click OK. 


T4 
sele 


m To thet 
Convert, transfer, or save marquee selections rere 


Convert a marquee to a path 
You can convert a bitmap selection to a vector object by drawing a marquee around the part of the bitmap that you want to convert. This process 
is useful if you want to start creating an animation by tracing a selection from a bitmap. 


“+ After drawing a marquee, choose Select > Convert Marquee to Path. 


Transfer a marquee selection to another bitmap object 
You can transfer a marquee selection from one bitmap to another or to a mask. 
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1. Make a selection by drawing the marquee. 
2. In the Layers panel, select a different bitmap object on any layer. 


For more information, see Masking. 


Save or restore a marquee selection 
1. Choose Select > Save Bitmap Selection or Select > Restore Bitmap Selection. 
2. From the Document menu, choose the open document that contains the saved selection. 
3. From the Selection menu, either choose New or a previously saved selection that you want to modify. 
4. If you chose New above, enter a name for your new selection. 
5. (Restore only) To invert the restored selection, select the Invert box. 
6. Select an option in the Operation section: 


Note: If you’re saving a new selection, all modification options below are disabled. 
New selection Replaces the active selection in the active document with the one specified in the Selection box. 


Add to selection Adds the active selection to the one specified in the Document and Selection boxes. 
Subtract from selection Subtracts the active selection from the one specified in the Document and Selection boxes. 
Intersect with selection Intersects the active selection with the one specified in the Document and Selection boxes. 


7. Click OK, and then repeat this process for each marquee selection that you want to save or restore. 


Delete a saved marquee selection 
Note: This feature is enabled only if an open document contains at least one saved selection. 


1. Choose Select > Delete Bitmap Selection. 
2. From the Document menu, choose the open document that contains the saved selection. 


3. From the Selection menu, choose the selection. 


P To the to 
Copy or move the contents of a marquee selection p 


When you use a selection tool to drag a marquee to a new location, the marquee moves, but not its contents. To copy or move the selected 
pixels, either use the Pointer tool ® or hold down a modifier key while using any Bitmap tool. 


Q If you hold down the modifier keys noted below, you can move and copy selections with the arrow keys. To move in 10-pixel increments, also 
hold down Shift. 


Move the contents of a marquee selection 
1. Make a pixel selection with a bitmap selection tool. 
2. Do one of the following: 
e Using any tool from the Bitmap section of the Tools panel, hold down Control (Windows) or Command (Mac OS), and drag the selection. 


e Using the Pointer tool, drag the selection. 


Copy the contents of a marquee selection 
& Do any of the following: 


e Drag the selection with the Subselection tool X, 

e Drag the selection with the Pointer tool, while holding down Alt (Windows) or Option (Mac OS). 

e Drag the selection with any Bitmap tool, while holding down Ctrl+Alt (Windows) or Command+Option (Mac OS). 
Note: When you use either procedure above, the moved or copied selection remains part of the current bitmap object. To create a bitmap from a 
pixel selection, complete the procedure below. 
Insert a new bitmap by copying a selection 

1. Select an area of pixels, using a pixel selection tool. 

2. Do one of the following: 


e Select Edit > Insert > Bitmap Via Cut. 
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A new bitmap object based on the pixel selection is created in the current layer, and the selected pixels are removed from the original 
bitmap object. 


e Select Edit > Insert > Bitmap Via Copy. 


A new bitmap object based on the pixel selection is created in the current layer. In the Layers panel, a thumbnail of the new bitmap 
appears in the current layer, above the object from which it was cut or copied. 


More Help topics 
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Working with bitmaps 


Add noise to an image 


Add noise 


When viewed at high magnification levels, most images obtained from digital cameras and scanners do not have perfectly uniform colors. Instead, 
the colors you see consist of pixels of many different colors. In image editing, noise refers to these random color variations in the pixels that make 
up an image. 


Sometimes, such as when you are pasting part of one image into another, the difference in the amount of random color variation in the two images 
can stand out. This can prevent the images from blending together smoothly. In such a case, add noise to one or both images to create the illusion 
that both images come from the same source. You can also add noise to an image for artistic reasons—for instance, to simulate an old 
photograph or static on a television screen. 


Original photograph; after adding noise 


r To the t 
Add noise T PIERR 


1. Select the image. 

2. Do one of the following to open the Add Noise dialog box: 
e In the Property inspector, click the plus (+) icon next to the Filters label, and select Noise > Add Noise from the Filters pop-up menu. 
e Select Filters > Noise > Add Noise. 


Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option. To 
maintain the ability to adjust, turn off or remove this filter, and then apply it as a Live Filter as described in the first bulleted option in this 
step. For more information, see Using Live Filters. 


3. Drag the Amount slider to set the amount of noise. 
Values range from 1 to 400. An increase in amount results in an image with more randomly placed pixels. 
4. Select the Color option to apply color noise. Deselect the option to apply monochrome noise only. 


5. Click OK. 
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Adjust bitmap color and tone 


Apply a Live Filter to an area defined by a bitmap selection marquee 
Adjust tonal range in bitmaps 

Adjust highlights, midtones, and shadows with Levels 
Adjust highlights, midtones, and shadows automatically 
Adjust a specific color in the tonal range with Curves 
Adjust brightness and contrast 

Change object colors by blending 

Adjust hue and saturation 

Invert an image's color values 

Change an object to grayscale 

Change an object to sepia tone 


Use color- and tone-adjustment filters to improve and enhance the colors in your bitmap images. 


To apply filters that are removable, editable, and that do not permanently alter pixels, use Live Filters. Adobe recommends using filters as 
Live Filters whenever possible. 


Note: Although Live Filters are more flexible, | arge numbers of Live Filters in a document can slow down Fireworks’ performance. 
To apply filters in an irreversible, permanent way, select them from the Filters menu. 


You can't apply Live Filters from the Filters menu to pixel selections. You can define an area of a bitmap and create a separate bitmap from 
it, and then apply a Live Filter to it. 


If you apply a filter to a selected vector object using the Filters menu, Fireworks converts the selection to a bitmap. 


Apply a Live Filter to an area defined by a bitmap selection marquee iene 
1. Select a bitmap selection tool and draw a selection marquee. 
2. Select Edit > Cut. 
3. Select Edit > Paste. 
Fireworks pastes the selection exactly where the pixels were originally located, but the selection is now a separate bitmap object. 
4. Click the thumbnail of the new bitmap object in the Layers panel to select the bitmap object. 
5. Apply a Live Filter from the Property inspector. 
Fireworks applies the Live Filter only to the new bitmap object, simulating the application of a filter to a pixel selection. 
To the top 


Adjust tonal range in bitmaps 


A bitmap with a full tonal range must have an even number of pixels in all areas. Three options are available for adjusting tonal range: using 
Levels, using Curves for precise control, or using Auto Levels for automatic adjustments. 


The Levels feature corrects bitmaps with a high concentration of pixels in the highlights, midtones, or shadows. 


Highlights Corrects an excess of light pixels, which makes the image look washed out 
Midtones Corrects an excess of pixels in the midtones, which makes the image bland 
Shadows Corrects an excess of dark pixels, which hides much of the detail 


The Levels feature sets the darkest pixels as black and the lightest pixels as white, and then redistributes the midtones proportionally. This 
produces an image with the sharpest detail in all of its pixels. 
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Original with pixels concentrated in the highlights; after adjusting with Levels 


Use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap. The Histogram is a graphical representation of the distribution 
of pixels in the highlights, midtones, and shadows. 


The Histogram helps you determine the best method of correcting an image's tonal range. A high concentration of pixels in the shadows or 
highlights indicates that you could improve the image by applying the Levels or Curves feature. 


The horizontal axis represents color values from darkest (0) to brightest (255). Read the horizontal axis from left to right: the darker pixels are on 
the left, the midtone pixels are in the center, and the brighter pixels are on the right. 


The vertical axis represents the number of pixels at each brightness level. Typically, you adjust the highlights and shadows first. Adjusting the 
midtones second lets you improve their brightness value without affecting the highlights and shadows. 


Adjust highlights, midtones, and shadows with Levels Tathetop 


1. Select the bitmap image. 
2. Do one of the following: 


e In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Levels from the Filters pop-up 
menu. 


e Select Filters > Adjust Color > Levels. 


Channel: RGB 


Input Levels: 255 


2\A\F 


Preview 


a ~ 


Output Levels: |0 


Levels dialog box 
Q To view your changes in the workspace, select Preview in the dialog box. As you make changes, the image updates. 
3. In the Channel pop-up menu, select to apply changes to individual color channels (Red, Blue, or Green) or to all color channels (RGB). 
4. Drag the Input Levels sliders under the Histogram: 
e The right slider adjusts the highlights using values from 255 to 0. 
e The center slider adjusts the midtones using values from 10 to 0. 
e The left slider adjusts the shadows using values from O to 255. 


Note: The shadow value cannot be higher than the highlight value; the highlight value cannot be lower than the shadow value; and the 
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midtones must fall between the shadow and highlight settings. 
5. Drag the Output Levels sliders to adjust the contrast values: 
e The right slider adjusts the highlights using values from 255 to 0. 


e The left slider adjusts the shadows using values from 0 to 255. 


Adjust highlights, midtones, and shadows automatically en 


1. Select the image. 


2. Do one of the following: 


e Inthe Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Auto Levels from the Filters pop- 
up menu. 


e Select Filters > Adjust Color > Auto Levels. 


g You can also adjust highlights, midtones, and shadows automatically by clicking the Auto button in the Levels or Curves dialog box. 


Adjust a specific color in the tonal range with Curves ier? 


The Curves feature provides more precise control over the tonal range than the Levels feature. The Curves feature lets you adjust any color along 
the tonal range, without affecting other colors. 


The grid in the Curves dialog box illustrates two brightness values: 


The horizontal axis Represents the original brightness of the pixels, shown in the Input box 

The vertical axis Represents the new brightness values, shown in the Output box 

When you first open the Curves dialog box, the diagonal line indicates that no changes have been made, so the input and output values are the 
same for all pixels. 


1. Select the image. 
2. Do one of the following to open the Curves dialog box: 


e In the Property inspector, click the Plus (+) button beside the Filters label, and then select Adjust Color > Curves from the Filters pop-up 
menu. 


Note: Ifthe Property inspector is partially minimized, click the Add Filters button instead of the Plus button. 


e Select Filters > Adjust Color > Curves. 


Channel: RGB v] 


A\A\A| 
[V] Preview 


Input: 0 
Output: 


Curves dialog box 


3. In the Channel pop-up menu, select whether to apply changes to individual color channels or to all colors. 
4. Click a point on the grid's diagonal line and drag it to a new position to adjust the curve. 
e Each point on the curve has its own Input and Output values. When you drag a point, the Input and Output values update. 


e The curve displays brightness values of O to 255, with O representing the shadows. 
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Curve after dragging a point to adjust 


Q To adjust highlights, midtones, and shadows automatically, click the Auto button in the Curves dialog box. 


Delete a point along the curve 
& Drag the point off the grid. 


Note: You cannot delete the end points of the curve. 


Adjust the tonal balance manually 
1. Open the Levels or Curves dialog box, and select a color channel from the Channel pop-up menu. 
2. Select the appropriate eyedropper to reset the tonal values in the image: 
e Click the lightest pixel in the image with the Highlight eyedropper ?* to reset the highlight value. 
e Click a pixel of neutral color in the image with the Midtone eyedropper to reset the midtone value. 
e Click the darkest pixel in the image with the Shadow eyedropper to reset the shadow value. 


3. Click OK. 


Adjust brightness and contrast ee 


The Brightness/Contrast feature modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an 
image. 


R 


=] 
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r 
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Original; after adjusting brightness 


1. Select the image. 
2. Do one of the following: 


e In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Brightness/Contrast from the 
Filters pop-up menu. 


e Select Filters > Adjust Color > Brightness/Contrast. 


3. Drag the Brightness and Contrast sliders to adjust the settings between the range of —100 to 100. 


Change object colors by blending To the top 


For more information, see About blending modes. 
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When you blend colors, the color is added on top of the object. Blending a color into an existing object is like using Hue/Saturation. However, 
blending lets you quickly apply a specific color from a color swatch panel. 


1. In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Color Fill from the Filters pop-up 
menu. 


2. Select a blending mode. The default is Normal. 
3. Select a fill color from the color box pop-up menu. 


4. Select a percentage of opacity for the fill color and press Enter. 


Adjust hue and saturation To the top 


Adjust the shade of a color (hue), the intensity of a color (Saturation), or the lightness of a color in an image. 


Original; after adjusting the saturation 


1. Select the image. 
2. Do one of the following: 


e Inthe Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Hue/Saturation from the Filters 
pop-up menu. 


e Select Filters > Adjust Color > Hue/Saturation. 
3. Drag the sliders to adjust the image colors. 
e Hue values range from —180 to 180. 


e Saturation and Lightness values range from —100 to 100. 


Change an RGB image to a two-tone image or add color to a grayscale image 
“* Select Colorize in the Hue/Saturation dialog box. 


Note: When you select Colorize, the value range of the Hue and Saturation sliders changes. Hue changes to 0 to 360. Saturation changes to O to 
100. 


Fi i To the top 
Invert an image's color values 


You can change each color in an image to its inverse on the color wheel. For example, applying the filter to a red object (R=255, G=0, B=0) 
changes the color to light blue (R=0, G=255, B=255). 
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A color image; after inverting 


1. Select the image. 


2. Do one of the following: 


e In the Property inspector, click the plus (+) icon next to the Filters label, and then select Adjust Color > Invert from the Filters pop-up 


menu. 


e Select Filters > Adjust Color > Invert. 


Change an object to grayscale 
1. Select the object. 


2. Select Commands > Creative > Convert To Grayscale. 


Change an object to sepia tone 
1. Select the object. 
2. Select Commands > Creative > Convert To Sepia Tone. 


More Help topics 
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To the top 


To the top 


Blurring and sharpening bitmaps 


Blurring options 

Change a bitmap into a line drawing 
Convert an image to a transparency 
Sharpen an image 


P i To the to 
Blurring options k 


Blur Softens the focus of selected pixels. 

Blur More Blurs about three times as much as Blur. 

Gaussian Blur Applies a weighted average of blur to each pixel to produce a hazy effect. Blur radius values range from 0.1 to 250. An increase in 
radius results in a stronger blur effect. 

Motion Blur Creates the appearance that the image is moving. Distance values range from 1 to 100. An increase in distance results in a stronger 
blur effect. 

Radial Blur Creates the appearance that the image is spinning. Quality values range from 1 to 100. An increase in quality results in a blur effect 
with fewer repetitions of the original image. 

Zoom Blur Creates the appearance that the image is moving toward or away from the viewer. Requires Amount and Quality values. An increase 
in quality results in a blur effect with fewer repetitions of the original image. An increase in amount results in a stronger blur effect. 


1. Select the image. 

2. Do one of the following: 
e In the Property inspector, click the plus (+) icon next to the Filters label, and then select a Blur option from the Filters pop-up menu. 
e Select Filters > Blur > [blur option]. 


3. Set other values for the selected blur option. 


Change a bitmap into a line drawing N 


Change bitmaps to look like line drawings by identifying the color transitions in the images and changing them to lines. Do one of the following: 
e In the Property inspector, click the plus (+) icon next to the Filters label, and then select Other > Find Edges from the Filters pop-up menu. 


e Select Filters > Other > Find Edges. 


Original; after applying Find Edges 


S To the top 
Convert an image toa transparency 


Convert an object or text into a transparency based upon the transparency of the image. Do one of the following: 


e In the Property inspector, click the plus (+) icon next to the Filters label, and then select Other > Convert to Alpha from the Filters pop-up 
menu. 
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e Select Filters > Other > Convert to Alpha. 


. To thet 
Sharpen an image o the top 


Use a Sharpen option to correct blurry images: 


Sharpen Adjusts the focus of a blurred image by increasing the contrast of adjacent pixels. 

Sharpen More Increases the contrast of adjacent pixels about three times as much as Sharpen. 

Unsharp Mask Sharpens an image by adjusting the contrast of the pixel edges. This option offers the most control, so it is usually the best option 
for sharpening an image. 


Original; after sharpening 


1. Select the image. 
2. Do one of the following: 


e In the Property inspector, click the plus (+) icon next to the Filters label, select Sharpen, and then select a Sharpen option from the 
Filters pop-up menu. 


e Select Filters > Sharpen > [sharpen option]. 
The Sharpen or Sharpen More options take effect. 
3. (Unsharp Mask option) Drag the Sharpen Amount slider to select the amount of sharpening effect from 1% to 500%. 
4. Drag the Pixel Radius slider to select a radius from 0.1 to 250. 
An increase in radius results in a greater area of sharp contrast surrounding each pixel edge. 
5. Drag the Threshold slider to select a threshold of 0 to 255. 


Values between 2 and 25 are most commonly used. An increase in threshold sharpens only those pixels of a higher contrast in the image. A 
decrease in threshold includes pixels of lower contrast. A threshold of O sharpens all pixels in the image. 


More Help topics 
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Creating bitmaps 


Create bitmap objects by drawing 

Create empty bitmap objects 

Cut or copy pixels and paste them as a new bitmap object 
Convert selected vector objects to a bitmap image 


Bitmaps are graphics composed of small colored squares called pixels, which combine like the tiles of a mosaic to create an image. Examples of 
bitmap graphics include photographs, scanned images, and graphics created from paint programs. They are sometimes referred to as raster 
images. 


Adobe® Fireworks® combines the functionality of photo-editing, vector-drawing, and painting applications. You can create bitmap images by 
drawing and painting with bitmap tools, by converting vector objects to bitmap images, or by opening or importing images. Bitmap images cannot 
be converted to vector objects. 


Create bitmap objects by drawing veneer 


When you create a bitmap object, it appears on the current layer. In the Layers panel with layers expanded, you can see a thumbnail and name 
for each bitmap object under the layer on which it resides. Although some bitmap applications consider each bitmap object a separate layer, 
Fireworks combines bitmap objects, vector objects, and text on layers. 


1. Select the Brush or Pencil tool from the Bitmap section of the Tools panel. 
2. Paint or draw with the Brush or Pencil tool to create bitmap objects on the canvas. 


A new bitmap object is added to the current layer in the Layers panel. For more information on using the Pencil or Brush tools, see Editing 
bitmaps. 


Create empty bitmap objects To the top 


You can create an empty bitmap and later draw or paint pixels in it. 
& Do one of the following: 

e Click the New Bitmap Image button E in the Layers panel. 

e Select Edit > Insert > Empty Bitmap. 


e Draw a selection marquee, starting in a blank area of the canvas, and fill it. For more information, see Create pixel selection marquees. 


An empty bitmap is added to the current layer in the Layers panel. 


Cut or copy pixels and paste them as a new bitmap object wary 
1. Make a pixel selection, using the Marquee tool, Lasso tool, or Magic Wand tool. 
2. Cut and then paste, or copy the selection into a new bitmap. 
The selection appears in the Layers panel as an object on the current layer. 
Note: You can also right-click (Windows) or Control-click (Mac OS) a pixel marquee selection and select a cut or copy option. 
To the top 


Convert selected vector objects to a bitmap image 


Note: A vector-to-bitmap conversion is irreversible, except when Edit > Undo or undoing actions in the History panel is still an option. 
** Do one of the following: 


e Select Modify > Flatten Selection. 
e Select Flatten Selection from the Layers panel Options menu. 


More Help topics 
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Editing bitmaps 


Draw bitmap objects 

Paint an object with the Brush tool 

Change pixels to the fill color 

Apply a gradient fill to a pixel selection 
Sample a color to use as a stroke or fill color 
Erase pixels in a bitmap object or selection 
Crop a selected bitmap 


Most commonly used tools for photo editing are located in the Image Editing panel (Window > Others > Image Editing). For more information, see 
Ruth Kastenmayer’s article, http://www.adobe.com/go/learn_fw_imageeditingpanel_en, at the Adobe Dev Center. 


Draw bitmap objects To the top 


1. Select the Pencil tool . 
2. Set tool options in the Property inspector: 
Anti-aliased Smoothens the edges of the lines you draw 
Auto Erase Uses the fill color when the Pencil tool is clicked over the stroke color 
Preserve Transparency Restricts the Pencil tool to drawing only in existing pixels, not in transparent areas of a graphic 


3. Drag to draw. Shift-drag to constrain the path to a horizontal, vertical, or diagonal line. 


Paint an object with the Brush tool Ronee 


For more information, see Apply and change strokes. 
1. Select the Brush tool &. 
2. Set the stroke attributes in the Property inspector. 


3. Drag to paint. 


Change pixels to the fill color Haii 


1. Select the Paint Bucket tool Q. 
2. Select a color in the Fill Color box. 
3. Set the tolerance value in the Property inspector. 


Note: Tolerance determines how similar in color pixels must be to be filled. A low tolerance value fills pixels that have color values similar 
to the pixel you click. A high tolerance fills pixels that have a broader range of color values. 


4. Click the image. 


All pixels within the tolerance range change to the fill color. 


Apply a gradient fill to a pixel selection ere 
1. Make the selection. 
2. Click the Paint Bucket tool in the Tools panel and select the Gradient tool L from the pop-up menu. 
3. Set the fill attributes in the Property inspector. 
4. Click the pixel selection to apply the fill. 
To the top 


Sample a color to use as a stroke or fill color 
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Note: The color box eyedropper pointer is different from the Eyedropper tool. See Sample colors from a color pop-up window. 


Use the Eyedropper tool 8 to sample a color from an image. 
1. If the correct attribute is not already active, do one of the following: 
e Click the stroke icon next to the Stroke Color box in the Tools panel to make it the active attribute. 
e Click the fill icon next to the Fill Color box in the Tools panel to make it the active attribute. 
Note: Do not click the color box itself. If you do, the eyedropper pointer appears instead of the Eyedropper tool. 
2. Open a Fireworks document or any file that Fireworks can open. 


3. Select the Eyedropper tool from the Colors section of the Tools panel. Then set the Color Averaging Sample setting in the Property 
inspector: 


1-pixel Creates a stroke or fill color from a single pixel 

3x3 Average Creates a stroke or fill color from the average of color values in a 3-by-3-pixel area 

5x5 Average Creates a stroke or fill color from the average of color values in a 5-by-5-pixel area 
4. Click the Eyedropper tool anywhere in the document. 


The sampled color appears in all Stroke Color or Fill Color boxes throughout Fireworks. 


Erase pixels in a bitmap object or selection ceerar 
1. Select the Eraser tool J . 
2. In the Property inspector, select the round or square eraser shape. 
3. Drag the sliders to set the Edge, Size, and Opacity levels. 
4. Drag the Eraser tool over the pixels you want to erase. 
To the top 


Crop a selected bitmap 
You can isolate a single bitmap object in a Fireworks document and crop only that bitmap object, leaving other objects on the canvas intact. 
1. Select a bitmap object or draw a selection marquee, using a bitmap selection tool. 
2. Select Edit > Crop Selected Bitmap. 
3. Adjust the crop handles until the bounding box surrounds the area of the bitmap image that you want to keep. 


Note: To cancel a crop selection, press Escape. 


Bounding box 


4. Double-click inside the bounding box or press Enter to crop the selection. 


More Help topics 
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Retouching bitmaps 


Clone pixels 

Blur, sharpen, and smudge images 
Lighten and darken parts of images 
Remove red-eye from photos 
Replace colors in bitmap objects 
Blur edges by feathering 


& The Rubber Stamp tool lets you copy or clone one area of an 
image to another. 


ô The Blur tool decreases the focus of selected areas in an image. 


The Smudge tool picks up color and pushes it in the direction that 
you drag in an image. 


gT 


A The Sharpen tool sharpens areas in an image. 

e The Dodge tool lightens parts of an image. 

® The Burn tool darkens parts of an image. 

Es The Red-eye Removal tool reduces the appearance of red-eye in 
photos. 

ly The Replace Color tool paints over one color with another color. 


. To thet 
Clone pixels ere 


Cloning pixels is useful when you want to fix a scratched photograph or remove dust from an image; you can copy a pixel area of a photo and 
replace the scratch or dust spot with the cloned area. 


1. Select the Rubber Stamp tool. 
2. Click an area to designate it as the source (the area you want to clone). 
The sampling pointer becomes a cross-hair pointer. 
Note: To designate a different area of pixels to clone, Alt-click (Windows) or Option-click (Mac OS) another area of pixels. 
3. Move to a different part of the image and drag the pointer. 
Two pointers appear. 
e The first is the source and is in the shape of a cross hair. 


e Depending upon the brush preferences you've selected, the second pointer is a rubber stamp, a cross hair, or a blue circle. As you drag 
the second pointer, pixels beneath the first pointer are copied and applied to the area beneath the second. 


Set options for the Rubber Stamp tool 
1. Select the Rubber Stamp tool. 
2. In the Property inspector, set Rubber Stamp options: 
Size Determines the size of the stamp. 
Edge Determines the softness of the stroke (100% is hard; 0% is soft). 


Source Aligned Determines the sampling operation. When Source Aligned is selected, the sampling pointer moves vertically and 
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horizontally in alignment with the second. When Source Aligned is deselected, the sample area is fixed, regardless of where you move and 
click the second pointer. 


Use Entire Document Samples from all objects on all layers. When this option is deselected, the Rubber Stamp tool samples from the 
active object only. 


Opacity Determines how much of the background can be seen through the stroke. 


Blend Mode Determines how the cloned image affects the background. 


Duplicate a pixel selection 
e Drag the pixel selection with the Subselection tool. 


e Alt-drag (Windows) or Option-drag (Mac OS) the pixel selection, using the Pointer tool. 


. To the to 
Blur, sharpen, and smudge images p 


The Blur and Sharpen tools affect the focus of pixels. The Blur tool lets you emphasize parts of an image by selectively blurring the focus of 
elements. The Sharpen tool is useful for repairing scanning problems or out-of-focus photographs. The Smudge tool lets you gently blend colors. 


1. Select the Blur, Sharpen, or Smudge tool. 

2. Set brush options in the Property inspector: 
Size Sets the size of the brush tip. 
Edge Specifies the softness of the brush tip. 
Shape Sets a round or square brush tip shape. 
Intensity Sets the amount of blurring or sharpening. 
Smudge options 
Pressure Sets the intensity of the stroke. 


Smudge Color Allows you to smudge using a specified color at the beginning of each stroke. If this option is deselected, the tool uses the 
color under the tool pointer. 


Use Entire Document Smudges using color data from all objects on all layers. If this option is deselected, the Smudge tool uses colors 
from the active object only. 


3. Drag the tool over the pixels you want to sharpen, blur, or smudge. 


Q Hold down Alt (Windows) or Option (Mac OS) to change from one tool behavior to the other. 


Lighten and darken parts of images To the top 


Use the Dodge or Burn tool to lighten or darken pixels in an image. Using these tools is like increasing or decreasing the light exposure when 
developing a photograph. 


1. Select the Dodge tool to lighten parts of an image or the Burn tool to darken parts of an image. 
2. Set the brush options and the exposure in the Property inspector. 
The exposure ranges from 0% to 100%. Higher values yield stronger effects. 
3. Set the range in the Property inspector: 
Shadows Changes mainly the dark portions of the image 
Highlights Changes mainly the light portions of the image 
Midtones Changes mainly the middle range per channel in the image 
4. Drag over the part of the image you want to lighten or darken. 


Note: To temporarily switch between the Dodge tool and the Burn tool, hold down Alt (Windows). 


To the to 
Remove red-eye from photos P 


The Red-eye Removal tool quickly paints only the red areas of a photograph, replacing reddish colors with grays and blacks. 
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Original photograph; after using the Red-eye Removal tool 


1. In the Bitmap section of the Tools panel, select the Red-eye Removal tool "a, (If the tool isn’t visible, hold down the Rubber Stamp tool until 
a pop-menu appears.) 


2. In the Property inspector, set these options: 
Tolerance Determines the range of hues to replace (0 replaces only red; 100 replaces all hues that contain red). 
Strength Sets the darkness of the grays used to replace reddish colors. 

3. Drag the cross-hair pointer over the red pupils in the photograph. 


If red-eye remains, choose Edit > Undo, and repeat steps 2 and 3 with different Tolerance and Strength settings. 


Replace a color by using the color swatch 


i 
1. In the Bitmap section of the Tools panel, select the Replace Color tool 7. (If the tool isn’t visible, hold down the Rubber Stamp tool until a 
pop-up menu appears.) 


In the From box in the Property inspector, click Swatch. 
Click the From color box to select the color probe, and select a color from the pop-up menu to specify the color you want to replace. 


Click the To color box in the Property inspector and select a color from the pop-up menu. 


a fF WwW DN 


. Set the other stroke attributes in the Property inspector: 
Tolerance Determines the range of colors to replace (0 replaces only the From color; 100 replaces all colors similar to the From color). 
Strength Determines how much of the From color is replaced. 


Colorize Replaces the From color with the To color. Deselect Colorize to tint the From color with the To color, leaving some of the From 
color intact. 


6. Drag the tool over the color you want to replace. 


Replace a color with a selected color in an image 


1. In the Bitmap section of the Tools panel, select the Replace Color tool Y. (If the tool isn’t visible, hold down the Rubber Stamp tool until a 
pop-up menu appears.) 


In the From box in the Property inspector, click Image. 
Click the To color box in the Property inspector to select the color probe, and then select a color from the pop-up menu. 


. Set the other stroke attributes in the Property inspector. 


Oo RB wo ON 


. Using the tool, click down on a section of the bitmap image that contains the color you want to replace. Without lifting the tool, continue to 
brush across the image with it. 


Blur edges by feathering To the top 


Feathering blurs the edges of a pixel selection and helps to blend the selected area with the surrounding pixels. Feathering is useful when you 
copy a selection and paste it onto another background. 
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Import the image that you want to feather on the canvas using File > Import. 
Select the part of the image that you want to feather using any of the selection tools. 
Select Select > Inverse. 


Select Select > Feather. Alternatively, you can select the option from the Edge menu in the Properties panel. 


1: 
2: 
3. 
4. 
5: 


In the Feather Selection dialog box, type a feather radius value. The default value of 10 is good for most practical purposes. Alternatively 
select a value for the feather radius in the Edge menu. 


6. Press Delete. 


More Help topics 
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Working with vector objects 
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Auto Shapes 


The Auto Shape tools 

Draw an Auto Shape 

Add a shadow to an Auto Shape 

Change Auto Shape properties precisely 

Change Auto Shape properties by using control points 
Use additional Auto Shapes 

Add new Auto Shapes to Fireworks 


Auto Shapes, unlike other object groups, have diamond-shaped control points in addition to the object group handles. Dragging a control point 
alters only its associated visual property. Most control points have tool tips that describe how they affect the Auto Shape. 


4 


Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows horizontally. Similarly, for the Star auto shape, 
click and drag the left control point up or down vertically to change the number of points. You can use the other control points to modify the 
“sharpness” and “depth” of the rays. 


For information about changing the orientation, see Transform and distort objects and selections. 


The Auto Shape tools or 
Arrow Simple arrows of any proportions, and straight or bent lines. 

Arrow Line Straight, thin arrow lines providing quick access to common arrowheads (simply click either end of the line). 

Beveled Rectangle Rectangles with beveled corners. 

Chamfer Rectangle Rectangles with chamfers (corners that are rounded inside the rectangle). 

Connector Line Three-segment connector lines, such as those used to connect the elements of a flowchart or organizational chart. 
Doughnut Filled rings. 

L-Shape Right-angled corner shapes. 

Measure Tool Simple arrow lines that indicate dimensions for key design elements in pixels or inches. 

Pie Pie charts. 

Rounded Rectangle Rectangles with rounded corners. 

Smart Polygon Equilateral polygons with 3 to 25 sides. 

Spiral Open spirals. 

Star Stars with any number of points from 3 to 25. 


Draw an Auto Shape hia 
1. In the Vector section of the Tools panel, select an Auto Shape tool from the pop-up menu. 
2. Do one of the following: 

e Drag the canvas to draw the shape. 


e Click the canvas to place the shape at its default size. 


Add a shadow to an Auto Shape To the top 


The Add Shadow command adds a shadow beneath the selected object based on the dimensions of that object. The shadow is actually an Auto 
Shape with control points that you can use to manipulate its appearance. For example, you can Shift-drag the direction control point to constrain its 
movement to a 45-degree angle. Clicking the direction control point resets the shadow to the original shape. The Add Shadow command 
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automatically sends the new shadow shape back by one level. Unless you apply this command to only one object at the top of the current layer, 
the shadow appears above the selected object. 


1. Select an object on the canvas. 

2. Select Commands > Creative > Add Shadow. 

3. (Optional) To change the shadow, do any of the following: 
e Drag the direction control point to constrain its movement on a 45-degree angle. 
e Click the direction control point to reset the shadow (its size is identical to the original shape). 
e Control-click or Command-click the direction control point to reset the x axis only. 


e Double-click the perspective control point to reset the width of the shadow only. 


Change Auto Shape properties precisely ee 


Use the Auto Shape Properties panel to exert precise numeric control over a selected Auto Shape or to insert another Auto Shape into your 
document. 


Note: This panel only supports Auto Shapes that appear in the Tools panel. It does not support third-party Auto Shapes or those in the Shapes 
panel (Window > Auto Shapes). 
The properties that you can change depend on the type of Auto Shape. 


1. Insert an Auto Shape into your document. 
2. Select Window > Auto Shape Properties. 
3. Adjust the properties. 


Q For Rectangle shapes, you can lock the shape corners so that changes to one corner affect all four. You can also change the properties 
for each corner individually. 


4. To apply the changes, press Tab or Enter. 


To further adjust the Auto Shape on the canvas, use the control points. The corresponding values in the Auto Shape Properties panel are 
updated dynamically. 


Change Auto Shape properties by using control points vere 


Select an Auto Shape, and then use the yellow control points to adjust the Auto Shape properties. 


Q Names for control points reveal their function. To see a name, hover the mouse over a control point until a tool tip appears. 


Adjust Arrow Auto Shapes 
e To adjust the flare and sharpness of the arrowhead, drag the Arrow Tip and Arrow Size control points. 
e To adjust the width, height, thickness, and corner roundness of the tail, drag the control point with a corresponding name. 


Q To create a bent arrow, drag the width or height control point to the right or left. 


Adjust Arrow Line Auto Shapes 
e To cycle through arrowhead options, click a control point at either end of the line. 


e To extend or shorten the line, drag a control point. 


Adjust beveled, chamfered, and rounded rectangle Auto Shapes 
e To adjust all corners of a rectangle together, drag a corner control point. 
e To adjust a single corner of a rectangle, Alt-drag (Windows) or Option-drag (Mac OS) a corner control point. 
e To resize a rectangle without affecting the corners, drag the drag-to-resize control point. 
e To convert all corners of a rectangle to a different type, click any corner control point. 


e To convert a single corner to a different type, Alt-click (Windows) or Option-click (Mac OS) any corner control point. 


Adjust Connector Line Auto Shapes 
e To move the start or end point, drag the control point at the start or end of the connector line. 


e To reposition the crossbar, drag the horizontal position control point. 
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e To adjust all corners, drag a corner control point. 


e To adjust a single corner, Alt-drag (Windows) or Option-drag (Mac OS) a corner control point. 


Adjust Doughnut Auto Shapes 


Doughnut Auto Shapes initially have three control points. For any new section that you add, Fireworks adds a control point for resizing or splitting 
the new section. 


e To add sections, Alt-drag (Windows) or Option-drag (Mac OS) an add/divide sector control point on the outer perimeter of the shape. 


e To remove a section, drag the add/divide sector control point on the outer perimeter of the shape to define the portion of the shape that you 
want to remain on the canvas. 


e To resize the inner radius, drag the inner radius control point. 


e To set the inner radius to zero, click the reset radius control point. 


Adjust L-shaped Auto Shapes 
e To change the height or width of a section, drag one of the two height/width control points. 


e To adjust the roundness of the corners, drag the corner radius control point. 


Adjust Measure Tool Auto Shapes 
e To change the length or angle of the measured section, drag a control point at either end of the line. 
e To switch the units from pixels to inches, hold down Control (Windows) or Command (Mac OS) as you drag a control point at either end. 
e To extend or shorten the boundary lines for the measured area, drag a control point on either side of the numeric measurement. 


Q The Measure Tool is helpful when creating interface specifications. To hide measurements, click the eye icon in the Layers panel. 


Adjust Pie Auto Shapes 


Pie Auto Shapes initially have three control points. For any new section that you add, Fireworks adds a control point for resizing or splitting the 
new section. 


e To add sections, Alt-drag (Windows) or Option-drag (Mac OS) a drag-to-segment control point on the outer perimeter of the shape. 
e To resize a pie slice, drag a drag-to-segment control point on the outer perimeter of the shape. 


e To reset a pie to one slice, click the reset control point. 


Adjust Smart polygon Auto Shapes 


e To resize or rotate the polygon, drag the scale/rotate control point. To rotate only, Alt-drag (Windows) or Option-drag (Mac OS) the 
scale/rotate control point. 


e To add or remove sections, drag the sections control point. 

e To change the number of sides, drag the sides control point. 

e To split the polygon into segments, Alt-drag (Windows) or Option-drag (Mac OS) the sides control point. 
e To resize an inner polygon, drag the inner polygon control point. 


e To reset an inner polygon, click the reset inner polygon control point. 


Adjust Spiral Auto Shapes 
e To adjust the number of turns, drag the spirals control point. 


e To open or close the spiral, click the open/close spiral control point. 


Adjust Star Auto Shapes 
e To change the number of sides, drag the points control point. 
e To adjust the valleys, drag the valley control point. 
e To adjust the points, drag the peak control point. 


e To adjust the roundness of peaks or valleys, drag a roundness control point. 


To the top 
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Use additional Auto Shapes 


The Auto Shapes panel contains additional Auto Shapes that are more complex than those in the Tools panel. Place these Auto Shapes into your 
drawing by dragging them from the Auto Shapes panel to the canvas. 


1. Select Window > Auto Shapes to display the Auto Shapes panel. 
2. Drag an Auto Shape preview from the Auto Shapes panel to the canvas. 


3. (Optional) Edit the Auto Shape by dragging any of its control points. 


Add new Auto Shapes to Fireworks een 


Add new Auto Shapes from the Adobe® Fireworks® Exchange website. New Auto Shapes appear either in the Auto Shapes panel or the Tools 
menu. 


You can also add new Auto Shapes to Fireworks by writing JavaScript code. For more information, see Extending Fireworks. 
1. Select Window > Auto Shapes to display the Auto Shapes panel. 
2. From the Options menu, select Get More Auto Shapes. 
3. In the Exchange website, follow the onscreen instructions for adding new shapes. 


More Help topics 
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Basic shapes 


Draw and edit basic shapes 
Basic shapes include lines, rectangles, ellipses, rounded rectangles, polygons, and stars. 


Note: To avoid stray pixels, and to increase sharpness of vector objects, use Commands > Selection > Use Legacy Vector Rendering. 


š . To thet 
Draw and edit basic shapes per 


The Rectangle tool and the Rounded Rectangle tool draw rectangles as grouped objects. To move a rectangle corner point independently, 
ungroup the rectangle or use the Subselection tool X, 


For more information on resizing and scaling objects, see Transform and distort objects and selections. 


Draw a line, rectangle, or ellipse 
1. From the Tools panel, select the Line, Rectangle, or Ellipse tool. 
2. (Optional) Set the stroke and fill attributes in the Property inspector. 
3. Drag on the canvas to draw the shape. 
e For the Line tool, Shift-drag to constrain lines to 45° increments. 


e For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles. 


Draw a shape from the center point 
& Position the pointer at the intended center point and Alt-drag (Windows) or Option-drag (Mac OS) the drawing tool. To constrain proportions, 
also hold down Shift. 


Add arrowheads to a line 
1. Draw or select a line. 
2. Select Commands > Creative > Add Arrowheads. 
3. Set the following: 
e Select Add To Start and Add To End as necessary and set the arrowhead style. 


e Select Apply Stroke and Solid Fill as necessary. 


Adjust the position of a basic shape as you draw it 
& While holding down the mouse button, press and hold the spacebar (rectangle or ellipses only), and then drag the object to another location on 
the canvas. Release the Spacebar to continue drawing the object. 


Resize a selected line, rectangle, or ellipse 
Scaling a vector object does not change its stroke width. Objects resize proportionally. 


** Do one of the following: 
e Enter new width (W) or height (H) values in the Property inspector or the Info panel. 
e Inthe Select section of the Tools panel, select the Scale tool and drag a corner transform handle. 


e Select Modify > Transform > Scale and drag a corner transform handle, or select Modify > Transform > Numeric Transform and enter new 
dimensions. 


e Drag a corner point on a rectangle. 


Increase the sharpness of lines 
Lines drawn in Fireworks sometimes become blurred, and do not produce the required sharpness. The blurring is because of path nodes placed at 
half-pixels using the mouse. Use the Snap to Pixel command to increase the sharpness of objects. 


The command works for straight lines where the difference in the x or y coordinates for the two nodes is less than or equal to 0.5 px. If the 
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Fireworks nodes are positioned at half pixels, the X or y coordinates of both the nodes must be in the same pixel boundary. 


Shifting the nodes by 0.5 px can sometimes lead to a one pixel change in X or y coordinates in the Property inspector (Pl). The change is because 
the Property inspector uses the nearest integer for fractional values. 
Note: To avoid stray pixels, and to increase sharpness of vector objects, use Commands > Selection > Use Legacy Vector Rendering. 


Number Scenario Problem Solution 
1 A primitive rectangle is scaled The rectangle doesn’t snap to Select the object, right-click, 
with the ‘Scale Strokes and the nearest pixel and the and select Snap To Pixel.* 


Effects’ option disabled in the edges get blurred. 
Preferences dialog box. 


2 A line with even stroke width is | The line appears blurred. Select the object, right-click, 
drawn using the Line tool. and select Snap To Pixel.* 

3 A straight-line vector path The path appears blurred. Select the object, right-click, 
drawn using the Pen tool. and select Snap To Pixel.* 


*Snap to Pixel feature can also be accessed from the Modify menu or by using the shortcut key Ctrl+K (Windows) or Cmd+K (Mac OS). 


Note: You cannot undo the Snap To Pixel command. 


‘Step 1: Sharp rectangle drawn 


Edit 


Magnification 

‘Step 2: Rectangle transformed using | Select 

scale tool, resulting in blurred edges _ Hide Selection 
v Edges 


Convert Path to Marquee... 


Arrange > 
Transform > 


Snap To Pixel 


Step 3: Sharp rectangle after running - 
“Snap to Pixel command = 


Scenario 1 
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Step 1: Sharp straight Line on pixel boundary 
having even stroke | | 


Edit 


Magnification 
Select 


Step 2: Line on half pixels with even stroke , | 
resulting in blurred edges 


Hide Selection 
Step 3: After running Snap to Pixel command, v Edges 


we get a sharp line Convert Path to Marquee... 


Arrange 
Transform 
Snap To Pixel 


Edit 


Magnification 
Select 
Step 2: Rounded rectangle transformed 
using scale tool, resulting in blurred edge Hide Selection 
v Edges 


Convert Path to Marquee... 


Arrange > 
Transform i 


Snap To Pixel 


Step 3: Rounded rectangle sharpened 
after running Snap to Pixel command 


Scenario 3 


JSAPI: fw.getDocumentDOM().snapToPixel() - Snap To Pixel is applied on the selected object on the canvas. 


Draw basic rounded rectangles 


You specify corner roundness in either percentage or pixels. When specifying roundness in pixels, the maximum value is half the length of the 
shortest rectangle side; higher values have no increased effect. 


For information on preserving the rectangle roundness while scaling the object, see Sarthak's article. 
1. In the Vector section of the Tools panel, select the Rectangle tool. 


2. Drag on the canvas to draw the rectangle. 
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3. In the Property inspector, choose percentage or pixels from the pop-up menu to the right of the Roundness box. Set the percentage using 
the slider or enter a value from O to 100 in the box. If you chose pixels, you can enter up to half the length of the shortest rectangle side. 
Q Press the Up or Right arrow keys while dragging to get rounded corners. Use Down or Left Arrow keys to reduce the curve. 


Draw a basic polygon 
The Polygon tool draws equilateral polygons (including triangles), starting from a center point. 


1. Select Windows > Autoshape Properties. 
2. Click the Polygon tool. 
3. Do one of the following: 
e Drag the yellow controls to the desired number of sides. 


e Inthe Autoshape Properties dialog box, set the points and sides as required. 


Draw a star 
1. Click anywhere on the Tools panel, and press U. 
2. Click on the small downward arrow icon, and select the Star icon from the menu. 
3. Do one of the following: 
e Select Window > Autoshape Properties. Customize the star using the various options in the Auto Shape Properties dialog box. 
e Drag the yellow dots on the star. Move the mouse over the yellow dot. A tool tip appears describing its function. 


To constrain a star's orientation to increments of 45°, hold down Shift as you drag. 


Edit/save primitive rectangles 
The edit and save options for primitive rectangle are available in the property inspector only after you ungroup the rectangle. 


You cannot change the roundness of a rectangle using the property inspector after you ungroup it. However, you can use the vector tool to change 
the roundness of the rectangle. 


2 B 8 iv 1-Pixel Soft x] 


Texture: | Grain vio iv 


Roundness; 0 ~% Vv 


Stroke options in the Property Inspector before ungrouping the rectangle. 


FB e |v iPixelsot iv 


falieifel Edge: @ 0 |v 


Texture: | Grain ~ 


0 iv 
CESCE 


Stroke options in the Property Inspector after ungrouping the rectangle. 
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Compound shapes 


Create compound shapes 
To thet 
Create compound shapes ere 


Create a compound shape with simple vector paths like rectangle, ellipse, and other vector paths. Individual objects of a compound shape can be 
moved around, and edited using the subselection tool even after they are combined. In the Compound shape mode, all new vector objects are 
added to the same object in the layer panel. To add objects to a different object, exit the mode using the Normal button. 


You can create compound shapes doing one of the following: 
e Create a vector, select the compound shape operation such as Add and Subtract, and draw other vectors. 


e Create multiple vectors, and use the compound shape operation. 


Apply compound shape after creating multiple vector objects 
1. Select all the objects you want to be part of the compound shape. Any open paths you select are automatically closed. 
2. Select a vector tool (rectangle, ellipse, pen, or vector path) in the tool palette. 


3. Select one of the following options in the Property inspector. 


< Add/Union [Si] 

< SubtractPunch [Ei] 
e intersect [Ml] 

< Crop] 


For the punch operation, the last object added is punched on the union of the rest of the objects. Punch operation using Modify >Combine Paths 
also works this way. 


Apply compound shape before creating multiple vector objects 
1. Create a vector object. 


2. Select one of the following options in the Property inspector. 


< Add/Union [Œ] 

< Subtract/Punch ©] 
° intersect Œ] 

» Crop ®] 


3. Draw other objects over the first object to achieve the required effect. 


Convert compound shapes to composite path 
You cannot move and edit individual objects after you have converted a compound shape to a composite path. 


& To convert a compound shape to a composite path, click the Combine button. 


More Help topics 
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Free-form shapes 


Draw free-form paths with the Vector Path tool 

Draw free-form paths by plotting points with the Pen tool 
Convert path segments to straight or curved points 

Edit free-form paths by using points and point handles 
Extend and merge free-form paths 


You can draw and edit vector paths to create almost any shape of vector object. 


Draw free-form paths with the Vector Path tool ie cia 


The Vector Path tool, located in the Pen tool pop-up menu, is like using a felt-tip marker or crayon. 


The tool has a wide variety of brush stroke categories, including Air Brush, Calligraphy, Charcoal, Crayon, and Unnatural. Each category typically 
has a choice of strokes, such as Light Marker and Dark Marker, Splattered Oil, Bamboo, Ribbon, Confetti, 3D, Toothpaste, and Viscous Alien 
Paint. 


Although the strokes look like paint or ink, each has the points and paths of a vector object. This means that you can change the shape of the 
stroke using any of several vector-editing techniques. After you reshape the path, the stroke is redrawn. You can also modify existing brush 
strokes and add fills to selected objects you have drawn with the Vector Path tool. 


See Applying color, strokes, and fills. 
1. From the Pen tool pop-up menu, select the Vector Path tool d. 


2. (Optional) Set stroke attributes and Vector Path tool options in the Property inspector. (Optional) For more precise path smoothing, select a 
number from the Precision pop-up menu in the Property inspector for the Vector Path tool. The higher the number you select, the greater the 
number of points that appear on the path you draw. 


3. Drag to draw. To constrain the path to a horizontal or vertical line, hold down Shift while dragging. 


4. Release the mouse button to end the path. To close the path, release the mouse button when you return the pointer to the point at the 
beginning of the path. 


Draw free-form paths by plotting points with the Pen tool ree 


Plotting points is like drawing a connect-the-dots picture. When you click each point with the Pen tool, Fireworks automatically draws the path of 
the vector object from the last point you clicked. 


In addition to connecting the points with straight segments, the Pen tool can draw smooth, mathematically derived curve segments known as 
Bezier curves. Each point's type—corner point or curve point—determines whether the adjacent curves are straight lines or curves. 


You can modify straight and curved path segments by dragging their points. You can further modify curved path segments by dragging their point 
handles. You can also convert straight path segments to curved (and vice versa) by converting their points. 


Draw a path with straight line segments 
1. In the Tools panel, select the Pen tool. 


2. (Optional) Select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS X) and select one of the options on the Edit tab, and 
click OK: 


Show Pen Preview Previews the line segment that would result from the next click. 
Show Solid Points Shows solid points while you draw. 
3. Click the canvas to place the first corner point. 


4. Move the pointer and click to place the next point. 
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5. Continue plotting points. Straight segments bridge each gap between points. 
6. Do one of the following: 

e Double-click the last point to end the path as an open path. 

e Select another tool to end the path as an open path. 


Note: When you select another tool (other than the Text tool) and then return to the Pen tool, Fireworks resumes drawing the object at 
your next click. 


e To close the path, click the first point you plotted. The beginning and end points of a closed path are the same. 


Note: Loops formed by a path overlapping itself are not closed paths. Only paths that begin and end on the same point are closed 
paths. 


Draw a path with curved segments 
1. In the Tools pane, select the Pen tool. 
2. Click to place the first corner point. 


3. Move to the location of the next point, and then drag to produce a curve point. Each time you drag, Fireworks extends the line segment to 
the new point. 


4. Continue plotting points. If you drag a new point, you produce a curve point; if you just click, you produce a corner point. 


Q You can temporarily switch to the Subselection tool to change the location of points and the shape of curves as you draw. Press Control 
(Windows) or Command (Mac OS) while dragging a point or point handle with the Pen tool. 


5. Do one of the following: 


e To end the path as an open path, double-click the last point or select another tool. When you select certain tools and then return to the 
Pen tool, Fireworks resumes drawing the object at your next click. 


e To close the path, click the first point you plotted. The beginning and end points of a closed path are the same. 


Convert path segments to straight or curved points TEESE 


Straight path segments are intersected by corner points. Curved path segments contain curve points. 


You can convert a straight segment to a curved segment and vice versa by converting its point. 


Convert a corner point to a curve point 
1. In the Tools panel, select the Pen tool. 
2. Click a corner point on a selected path and drag away from it. 


The handles extend, curving the adjacent segments. 
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Note: To edit the point's handles, choose the Subselection tool or press Control (Windows) or Command (Mac) while the Pen tool is active. 


Convert a curve point to a corner point 
1. In the Tools panel, select the Pen tool. 


2. Click a curve point on a selected path. 


— 


The handles retract, and the adjacent segments straighten. 


> 


Edit free-form paths by using points and point handles tee 


The Subselection tool È in the Tools panel lets you select multiple points. Before selecting a point with the Subselection tool, select the path using 
the Pointer or Subselection tool or by clicking its thumbnail in the Layers panel. 


Select specific points on a selected path 
& Using the Subselection tool, do one of the following: 


e Click a point, or hold down Shift and click multiple points one by one. 


— 


e Drag around the points to be selected. 
Insert a point on a selected path 
Adding points to a path gives you control over a specific segment within the path. 


& Using the Pen tool, click anywhere on the path which is not a point. 


Delete a point from a selected path 
Deleting points from the path reshapes it or simplifies editing. 


84 


** Do one of the following: 
e Click a corner point on a selected object with the Pen tool. 
e Double-click a curve point on a selected object with the Pen tool. 


e Select a point with the Subselection tool and press Delete or Backspace. 


Move a point 
& Drag it with the Subselection tool. 


Change a straight path segment 
1. Select the path with the Pointer or Subselection tool. 
2. Click a point with the Subselection tool. 
Selected corner points appear as solid blue squares. 


3. Drag the point or use the arrow keys to move the point to a new location. 


Change the shape of a curved path segment 
1. Select the path with the Pointer or Subselection tool. 
2. Click a curve point with the Subselection tool. 


A selected curve point appears as a solid blue square. The point handles extend from the point. 


3. Drag the handles to a new location. To constrain handle movement to 45° angles, press Shift while dragging. 


The blue path preview shows where the new path is drawn if you release the mouse button. 


A B c 


K 


A. Point handle B. Selected point C. Subselection pointer D. Path preview E. Path 


For example, if you drag the left point handle downward, the right point handle goes up. Alt-drag a handle to move it independently. 


Adjust the handle of a corner point 
1. Using the Subselection tool, select a corner point. 


2. Alt-drag (Windows) or Option-drag (Mac OS) the point to display its handle and bend the adjacent segment. 
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Dragging a corner point handle with the Subselection tool to edit the adjacent path segment 


Extend and merge free-form paths 


Use the Pen tool to continue drawing an existing open path and to merge paths. 


Resume drawing an existing open path 
1. In the Tools panel, select the Pen tool. 


2. Click the end point and continue the path. 


Merge two open paths 


When you connect two paths, the topmost path's stroke, fill, and filter attributes become the attributes of the newly merged path. 


1. Select the Pen tool in the Tools panel. 
2. Click the end point of one of the paths. 


3. Move the pointer to the end point of the other path and click. 


Auto-join similar open paths 
You can join one open path with another that has similar stroke and fill characteristics. 


1. Select an open path. 
2. Choose the Subselection tool and drag an end point of the path within a few pixels of the end point of the similar path. 


More Help topics 
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To the top 


Special vector-editing techniques 


Edit with vector tools 
Edit with path operations 
Edit paths using the Path panel 


In addition to dragging points and point handles, you can use several Fireworks tools to edit vector objects directly. You can also use path 
operations to create new shapes by combining or altering existing paths. And, you can use the Path panel to gain quick access to path-related 
commands. 


For information on the new vector manipulation tools in Fireworks CS4, see 
http://www.adobe.com/devnet/fireworks/articles/vector_manipulation_tools_02.html. 


Edit with vector tools To the top 


Vector tools appear in the Tools panel. 


Bend and reshape vector objects with the Freeform tool 
The Freeform tool lets you bend and reshape vector objects directly instead of manipulating points. You can push or pull any part of a path, 
regardless of where the points are located. Fireworks adds, moves, or deletes points along the path as you change the vector object's shape. 


<_ — a > 


Me 


Freeform tool pulling a path segment; A indicates the specified length 


Io = 


Freeform tool pushing a path segment 


As you move the pointer over a selected path, it changes to the push or pull pointer, depending on its location relative to the selected path. You 
can change the size of the push or pull pointer. 


Pointer Meaning 

Ro The Freeform tool is in use. 

T The Freeform tool is in use, and the pull pointer is in position to 
$ 


pull the selected path. 


ir The Freeform tool is in use, and the pull pointer is pulling the 
R selected path. 


O The Freeform tool is in use, and the push pointer is active. 


The Reshape Area tool is in use, and the reshape area pointer is 
active. The area from the inner circle to the outer circle 
represents reduced strength. 


© 
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Note: The Freeform tool also responds to pressure from a Wacom or other compatible tablet. 


Pull a selected path 
When the pointer is directly over the path, you can pull the path. 


1. In the Tools panel, select the Freeform tool Ø. 
2. Move the pointer directly over the selected path. 
3. Drag the path. 
Push a selected path 
When the pointer is not directly over the path, you can push the path. 
1. In the Tools panel, select the Freeform tool. 
2. Point slightly away from the path. 
3. Drag toward the path to push it. Nudge the selected path to reshape it. 
Change the size of the push pointer 
** Do one of the following: 
e While holding down the mouse button, press the Right Arrow key or the 2 key to increase the width of the pointer. 
e While holding down the mouse button, press the Left Arrow key or the 1 key to decrease the width of the pointer. 


e To set the size of the pointer (in pixels) and set the length of the path segment that it affects, deselect all objects in the document, and then 
enter a value from 1 to 500 in the Size box of the Property inspector. 


Distort selected paths with the Reshape Area tool 
The Reshape tool pulls the area of all selected paths within the outer circle of the reshape area pointer. 


The pointer's inner circle is the boundary of the tool at full strength. The area between the inner and outer circles reshapes paths at less than full 
strength. The pointer's outer circle determines the gravitational pull of the pointer. You can set its strength. 


Note: The Reshape Area tool also responds to pressure from a Wacom or other compatible tablet. 
1. From the Freeform tool pop-up menu, select the Reshape Area tool. 
2. Drag across the paths to redraw them. 
Change the size of the reshape area pointer 
** Do one of the following: 
e While holding down the mouse button, press the Right Arrow key or the 2 key to increase the width of the pointer. 
e While holding down the mouse button, press the Left Arrow key or the 1 key to decrease the width of the pointer. 
e To set the size of the pointer (in pixels) and set the length of the path segment that it affects, deselect all objects in the document, and then 


enter a value from 1 to 500 in the Size box of the Property inspector. 


Set the strength of the inner circle of the reshape area pointer 
& In the Strength box of the Property inspector, enter a value from 1 to 100 to specify the percentage of the pointer's potential strength. The higher 
the percentage, the greater the strength. 


Redraw or extend a selected path segment with the Redraw Path tool 
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When you use the Redraw Path tool, the path's stroke, fill, and effect characteristics are retained. 


1. From the Pen tool pop-up menu, select the Redraw Path tool y. 


2. (Optional) Change the precision level of the Redraw Path tool by selecting a number from the pop-up menu in the Precision box of the 
Property inspector. The higher the number, the greater the number of points that appear on the path. 


3. Move the pointer directly over the path. 
4. Drag to redraw or extend a path segment. 


5. Release the mouse button. 


Change path appearance by varying pressure and speed with Path Scrubber tools 
Using varying pressure or speed, you can change a path's stroke properties. To specify which of these properties is affected by the Path Scrubber 
tools, use the Sensitivity tab of the Edit Stroke dialog box. You can also specify how much pressure and speed affects the properties. 


For details on setting options in the Edit Stroke dialog box, see Apply and change strokes. 


Slice a path into multiple objects with the Knife tool 
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1. In the Tools panel, select the Knife tool d 
Note: Using the eraser on Wacom pens automatically selects the Knife tool. 
2. Do one of the following: 
e Drag the pointer across the path. 
e Click the path. 
3. Deselect the path. 


Edit with path operations To the top 


You can use path operations in the Modify menu to create new shapes by combining or altering existing paths. For some path operations, the 
stacking order of selected path objects defines how the operation works. 


For information on arranging the stacking order of selected objects, see Stack the order of objects. 


Note: Using a path operation removes all pressure and speed information from the affected paths. 


Create one continuous path from two open paths 
1. In the Tools panel, choose the Subselection tool. 
2. Select two end points on two open paths. 
3. Select Modify > Combine Paths > Join. 


Create a composite path 
1. Select two or more open or closed paths. 


2. Select Modify > Combine Paths > Join. 


Break apart a composite path 
1. Select the composite path. 


2. Select Modify > Combine Paths > Split. 


Combine selected closed paths as one path enclosing the entire area of the original paths 
“* Select Modify > Combine Paths > Union. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. 


Convert a path to a marquee selection 
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You can convert a vector shape to a bitmap selection, and then use the bitmap tools to edit the new bitmap. 
1. Select a path. 
2. Select Modify > Convert Path To Marquee. 
3. In the Convert Path To Marquee dialog box, select an Edge setting for the marquee. 
4. If you chose Feather in the Edge setting, specify the value you want to use for the amount of feather. 
5. Click OK. 


Note: Converting a path to a marquee deletes the selected path. To change this default, select Edit > Preferences > Edit, and then 
deselect the Delete Paths When Converting To Marquee setting. 


Create an object from the intersection of other objects 
& Select Modify > Combine Paths > Intersect. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. 


Creating an object from the intersection of other objects 


Remove portions of a path object 
You can remove portions of a selected path object as defined by the overlapping portions of another selected path object arranged in front of it. 


OW 


Select the path object that defines the area you want to remove. 


Select Modify > Arrange > Bring To Front. 
Hold down Shift and add to the selection the path object from which the portions you want to remove. 
Select Modify > Combine Paths > Punch. 


A © N & 


Crop a path 
You can crop a path using the shape of another path. The front or topmost path defines the shape of the cropped area. 


Q © 


. Select the path object that defines the area you want to crop. 


1 
2. Select Modify > Arrange > Bring To Front. 

3. Hold down Shift and add to the selection the path object you want to crop. 
4. Select Modify > Combine Paths > Crop. 


The resulting path object retains the stroke and fill attributes of the object that is placed farthest back. 


Simplify a path 
The Simplify command removes redundant points on your path by an amount you specify. Examples of redundant points are more than two points 
on a straight line or points that lie exactly on top of one another. 


1. Select Modify > Alter Path > Simplify. 
2. Enter a simplification amount and click OK. 


Simplifying a path increases the extent to which Fireworks can alter the path to reduce the number of points on that path. 


Expand a selected object's stroke 
You can convert the stroke of a selected path into a closed path. The result creates the illusion of a path with no fill and a stroke that takes on the 
same attributes as the original object's fill. 
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Note: Expanding the stroke of a path that intersects itself can produce interesting results. If the original path contains a fill, the intersecting 
portions of the path will not contain a fill after the stroke is expanded. 


1. Select Modify > Alter Path > Expand Stroke. 
2. Set the width of the resulting closed path. 

3. Select a corner type. 
4 


. If you chose miter, set the miter limit (the point at which a miter corner automatically becomes a beveled corner). The miter limit is the ratio 
of miter corner length to stroke width. 


5. Select an end cap option, and then click OK. 


Contract or expand a path 
1. Select Modify > Alter Path > Inset Path. 
2. Select a direction to contract or expand the path: 
Inside Contracts the path. 
Outside Expands the path. 
Set the width between the original path and the contracting or expanding path. 
Select a corner type. 


If you chose miter, set the miter limit. 
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Click OK. 


Edit paths using the Path panel To the top 


To speed up path editing tasks, use the following tools in the Path panel (Window > Others > Path). 


Combine Paths 


SOOVO@ODOO 


Alter Paths 


33 9-9 5-3 0 UU 0d) O 
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Edit Points 


Kr4~%¢Rowrr 


Select Points a rs 
Pooeon “4 in} 


For more information, see http:/Mwww.adobe.com/go/learn_fw_designguide_en 


More Help topics 
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Vector objects 


A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along 
the path. A vector object's stroke color follows the path, and its fill occupies the area inside the path. The stroke and fill determine how the graphic 
looks when published in print or on the web. 


Vector object shapes include basic shapes, Auto Shapes (vector object groups that have special controls for adjusting their attributes), and free- 
form shapes. You can use a variety of tools and techniques to draw and edit vector objects. 
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Working with text 
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Enter text 


Create and move text blocks 
Change auto-sized and fixed-width text blocks 
Text overflow indicator 


Adobe® Fireworks® enables you to use many features typically reserved for sophisticated desktop publishing applications, including using a 
variety of fonts and sizes and adjusting kerning, spacing, color, leading, and baseline shift. You can edit text any time—even after you apply Live 
Filters, and can import editable text from an Adobe Photoshop® document. 


Use the Text tool T and the options in the Property inspector to enter, format, and edit text in your graphics. 


Note: Ifthe Property inspector is minimized, double-click the inspector bar to see all text properties. 
Text objects are automatically saved under a name that matches the text you've typed. You can change the assigned name in the Text box of the 
Property inspector or in the object panel thumbnail in the Layers panel. 


Text objects in the layer panel can be identified using the T icon. 


To the t 
Create and move text blocks ener 


Text in a Fireworks document appears inside a text block (a rectangle with handles). Text blocks are either auto-sizing or fixed-width blocks. 


e An auto-sizing text block expands horizontally as you type and shrinks when you remove text. Auto-sizing text blocks are created by default 
when you click on the canvas with the Text tool and start typing. 


e Fixed-width text blocks allow you to control the width of wrapped text. Fixed-width text blocks are created by default when you drag to draw a 
text block using the Text tool. 


e When the text pointer is active within a text block, a hollow circle or hollow square appears in the upper-right corner of the text block. The 
circle indicates an auto-sizing text block; the square indicates a fixed-width text block. Double-click the corner to change from one text block 
to the other. 


1. Select the Text tool. 
2. Select text characteristics. 
3. Create a text block: 
e To create an auto-sizing text block, click in your document where you want the text block to begin to create an auto-sizing text block. 


e To create a fixed-width text block, drag to draw a text block. To move the text block while you drag to create it, hold down the mouse button, 
press and hold down the spacebar, and drag the text block to another location. 


1. Type the text. 
2. (Optional) Highlight text within the text block and reformat it. 
3. (Optional) To move the text block, drag it to a new location. 
4. Do one of the following: 

e Click outside the text block. 

e Select another tool in the Tools panel. 


e Press Escape. 


Change auto-sized and fixed-width text blocks bia 
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A fixed-width text block and an auto-sizing text block 
A. Fixed-width indicator B. Auto-sizing indicator 
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e To change a text block to fixed-width or auto-sizing, double-click inside the text block, and then double-click the circle or square in the upper- 
right corner of the text block. 


e To change a selected text block to fixed-width by resizing it, drag a resize handle. 
e To change multiple text blocks to fixed-width, select the text blocks, and then select Commands > Text > Set Width. 


e To change fixed-width text blocks to auto-sizing, select the text blocks, and then select Commands > Text > Toggle Fixed Width. 


ia Š To the t 
Text overflow indicator Ne 


When the text exceeds the space that can be accommodated in a text block or on a path, the text overflow indicator appears. For more 
information, see http://www.fireworkszone.com/g-2-565. 


More Help topics 


O 


Legal Notices | Online Privacy Policy 
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Format and edit text 


Managing fonts 

Special characters and placeholder text 
Color, spacing, and text orientation 

Set paragraph indention and spacing 
Apply text effects 

Attaching text to a path 

Transform and convert text 

Import text 

Check spelling 


The quickest method of editing text with detailed editing control is to use the Property inspector. As an alternative to the Property inspector, use 
commands in the Text menu. 


For more information on text commands, see http://www.fireworkszone.com/page-2-4-1-566.html. 


Important: Changes you make during a text-editing session constitute only one Undo. Choosing Edit > Undo while editing text will undo every 
text edit you've made from the time you double-clicked the text block to edit its contents. 


1. Do one of the following to select the text you want to change: 


e Click a text block with the Pointer or Subselection tool to select the entire block. To select multiple blocks simultaneously, hold down 
Shift as you select each block. 


e Double-click a text block with the Pointer or Subselection tool, and then highlight a range of text. 
e Click inside a text block with the Text tool, and then highlight a range of text. 
2. Change the text or to the font. Fonts are measured in points. 
3. Do one of the following: 
e Click outside the text block. 
e Select another tool in the Tools panel. 


e Press Escape. 


R To thet 
Managing fonts EA 


About fonts 
A font is a complete set of characters—letters, numbers, and symbols—that share a common weight, width, and style, such as 10 -pt Adobe 
Garamond Bold. 


Typefaces (often called type families or font families) are collections of fonts that share an overall appearance, and are designed to be used 
together, such as Adobe Garamond. 


A type style is a variant version of an individual font in a font family. Typically, the Roman or Plain (the actual name varies from family to family) 
member of a font family is the base font, which may include type styles such as regular, bold, semibold, italic, and bold italic. 


In addition to the fonts installed on your system, you can also create the following folders and use fonts installed in them: 


Windows Program Files/Common Files/Adobe/Fonts 
Mac OS Library/Application Support/Adobe/Fonts 
If you install a Type 1, TrueType, OpenType, or CID font into the local Fonts folder, the font appears in Adobe applications only. 


Previewing fonts 
You can preview a font in the Font menu of the Property Inspector. You can turn off the preview feature or change the point size of the font names 
or font samples in Type preferences. 


Specify a typeface size 
By default, typeface size is measured in points (a point equals 1/72 of an inch). You can specify any typeface size from 0.1 to 1296 points, in 
0.001-point increments. 


Note: In Fireworks, the typeface size is measured in pixels by default. 
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1. Select the characters or type objects you want to change. If you don’t select any text, the typeface size applies to new text you create. 
2. Do one of the following: 


e Inthe Character panel or Control bar set the Font Size option. 
e Choose a size from the Type > Size menu. Choosing Other lets you type a new size in the Character panel. 


g You can change the unit of measurement for type in the Preferences dialog box. This option is not available in Fireworks. 


Make missing fonts available 
& Do any of the following: 


e Install the missing fonts on your system. 
e Activate the missing fonts using a font-management application. 


e Place the missing fonts in the Fonts folder, which is located in the application folder. Fonts in this folder are available only to the application. 
For Mac OS, fonts can be installed to the HD > Library > ApplicationSupport > Adobe > Fonts folder. Fonts installed here can only be used 
by Adobe products. 


Q If you don’t have access to the missing fonts, search for and replace missing fonts. 


Choose a font family and style 
You can choose a font family and style with the Property inspector or the Text menu. 


Choose a font family and style with the Property inspector 


1. Choose a family from the Font menu. If more than one copy of a font is installed on your computer, an abbreviation follows the font name: 
(T1) for PostScript fonts, (TT) for TrueType fonts, or (OT) for OpenType fonts. 


Q In Windows, you can choose a font family and style by typing its name in the box. As you type, the name of the first font or style 
beginning with that letter appears. Continue typing until the correct font or style name appears. 


2. To choose a typeface style, do one of the following: 
e Choose an installed style from the Style menu in the Property inspector. 


e Ifthe font family does not include styles, click the Faux Bold, Faux Italic, or Underline button to apply a simulated style. 


Choose a font family and style with the Text menu 


& Choose Text > Font > [family] > [style]. If the font family does not include styles, choose Regular, Faux Bold, Faux Italic, or Underline from the 
Text > Style menu. 


(Windows): Type the font name in the menu to search for the font. 


Change text to uppercase 
You can change the selected text to uppercase. 


& Select Commands > Text > Case Uppercase. 


Change text to lowercase 
You can change the selected text to lowercase. 


“ Select Commands > Text > Case Lowercase. 


Change text to sentence case 
You can change the selected text to start with an uppercase letter. 


& Select Commands > Text > Case Uppercase First. 


Insert line break 
Line breaks can be inserted using Shift+Enter. 


Undo text changes 


In the edit text mode, undo changes (ctrl + z) works for individual edits as long as you are in the edit mode. The changes are committed after you 
exit the mode, and undoing changes thereafter does not affect the text edits. 


Replacements for missing fonts 


When you open a document in Fireworks that contains fonts that are not installed on your computer, you can choose to replace the fonts or 
maintain their appearance. 
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Myriad Pro is substituted, by default, for text containing fonts unavailable on your computer. Use the Preferences dialog box to change this setting. 


Maintain Appearance Replaces the text with a bitmap image that represents the appearance of the text in its original font. You can still edit the 
text, but when you do, Fireworks replaces the bitmap image with a font that is installed on your system. Editing can cause the appearance of the 
text to change. 

Replace Missing Fonts Replaces fonts in the document. You can edit and save the text. When the document is reopened on a computer that 
contains the original fonts, Fireworks remembers and uses the original fonts. 


Select a replacement font 
1. Open a document with missing fonts, and select a missing font from the Change Missing Font list. 
2. Do one of the following: 
e Select a replacement font from the To list. 
e Click No Change to leave the missing font as is. 


The next time you open a document with the same missing fonts, the Missing Fonts dialog box includes the font you chose. 


Special characters and placeholder text an 


Insert special characters 
1. After creating a text block, click the location inside the text block where you want to insert a special character. 


2. Select Window > Others > Special Characters, and then select the character you want to insert. 


Insert placeholder text 
You can insert a block of placeholder text that does not have any specific meaning. This option places a block of text (lorem ipsum) into your 
canvas. 


& Select Commands > Text > Lorem Ipsum. 


Note: You can also use the Loremlpsum random text generator extension for quickly adding placeholder text for your mockups. The extension is 
available at http:/www.adobe.com/go/learn_fw_randomtextgenerator_en. 


z n F To the to 
Color, spacing, and text orientation j 


Apply color to text 


e By default, text is black and has no stroke. You can change the color of all text in a selected text block or of all highlighted text in a text 
block. In addition, stroke and Live Filters can be added to all text in a selected text block but not to text that is highlighted in a text block. 


e The Text tool retains the current text color from text block to text block. 


e Stroke characteristics and Live Filters that are applied to a text block are updated as you edit text in the text block, but those updates are not 
applied to new text blocks. 


e The Text tool retains the current text color regardless of the fill color of other tools. After you use a fill color and return to the Text tool, the fill 
color reverts to the most recent Text tool setting, and the stroke is reset to None. 


See Save stroke, fill, and filter text attributes as a style. 


Set the color of text in a selected text block 
& Do one of the following: 


e Click the Fill Color box in the Property inspector and select a color from the color pop-up window. Or, with either color pop-up window open, 
use the eyedropper pointer to sample a color from anywhere on the screen. 
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Fill Color box 
e Inthe Tools panel, click the icon next to the Fill Color box and select a color from the color pop-up window. Or, with the Fill Color box pop-up 
window open, use the eyedropper to sample a color anywhere on the screen. 


Note: When you apply a stroke to highlighted text in a text block, the entire text block is automatically selected. 


Set spacing between lines and letters 


Kerning increases or decreases the spacing (in percentages) between certain pairs of letters to improve their appearance. Auto-kerning uses a 
font's kerning information when displaying text. Tracking increases or decreases the spacing between selected characters. 


In Fireworks CS5, kerning and tracking behave as in CS3. You can change kerning and tracking by placing the cursor within a word, and changing 
the values 


The look and feel of text imported from legacy versions (CS3 and previous) remains the same. The kerning and tracking values however, are 
changed. This is because of the changes to the Adobe Text Engine since Fireworks CS3 


Q To disable auto-kerning, deselect Auto Kern in the Property inspector. 


Leading determines the distance between adjacent lines in a paragraph. Leading can be measured in pixels or as a percentage of the distance, in 
points, separating the lines baseline to baseline. For a detailed overview of how Fireworks uses the Adobe Text Engine (ATE) to render text 
elements, see the article by Arun Kaza at http://www.adobe.com/go/learn_fw_textengine_en. 


Set kerning or tracking 
1. Do one of the following to select the text you want to kern: 
e Use the Text tool to click between two characters or to highlight the characters you want to change. 
e Use the Pointer tool to select an entire text block. Shift-click to select multiple text blocks. 
2. Select the characters you want to set spacing for and do one of the following: 
e In the Property inspector, drag the Tracking pop-up slider or enter a percentage in the box. 
Zero represents normal tracking. Positive values move letters farther apart. Negative values move letters closer together. 
e Hold down Control (Windows) or Command (Mac OS) while pressing the Left Arrow or Right Arrow keys on the keyboard. 
The Left Arrow key decreases the space between letters by 1%, and the Right Arrow key moves letters farther apart by 1%. 


g Hold down Shift and Control (Windows) or Shift and Command (Mac OS) while pressing the Left Arrow or Right Arrow keys to adjust 
tracking by 10% increments. 


Set the leading of selected text 
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Leading options in the Property inspector 


1. Do one of the following: 
e Inthe Property inspector, drag the Leading pop-up slider or enter a value in the box. The default is 100%. 


e Using the keyboard, hold down Control (Windows) or Command (Mac OS) while pressing the Up Arrow key (to increase spacing) or the 
Down Arrow key (to decrease spacing). 


Q Hold down Shift and Control (Windows) or Shift and Command (Mac OS) while pressing the Up Arrow or Down Arrow keys to adjust 
leading by increments of 10. 


2. To change the type of leading unit, select % or PX (pixels) from the Leading Units pop-up menu. 
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Set text orientation and alignment 


Set text orientation 
You can orient entire text blocks horizontally or vertically. Multiple lines of vertical text flow right to left, reflecting Asian languages. 


1. Click the Text Orientation button &, in the Property inspector. 
2. Select an orientation option: 
Horizontal Left to Right The default setting. 


Vertical Right to Left Orients text vertically, flowing from top to bottom. Multiple lines of text separated by returns are displayed as columns 
that flow from right to left. 
Q To reverse text for a special effect, use the Distort tool and drag a side handle. 


Set text alignment 
Alignment determines the position of a paragraph of text relative to the edges of its text block. By default, horizontal text is left-aligned. 


Vertical text can be aligned to the top or bottom of a text block, centered within the text block, or fully justified between both the top and bottom 
edges. 


1. Select the text. 


2. Click an alignment button in the Property inspector. 


The alignment controls Æ appear in the Property inspector when text is highlighted or a text block is selected. 


Set paragraph indention and spacing rare 


& To indent text, in the Property inspector, drag the Paragraph Indent pop-up slider or enter a value (in pixels) in the text box. 


Paragraph indent option in the Property inspector 


& To set the amount of spacing before and after paragraphs, in the Property inspector, drag the Space Preceding Paragraph or Space After 
Paragraph pop-up slider, or enter a value in the text box. 


Paragraph spacing options in the Property inspector 


Apply text effects To the top 


Smooth edges of text 
Smoothing out an edge of selected text is referred to as anti-aliasing. Anti-aliasing makes the edges of the text blend into the background so that 
the text is cleaner and more readable when it is large. Anti-aliasing applies to all characters in a given text block. 


Original text; after smoothing 


“+ In the Property inspector, select one of options from the Anti-Aliasing pop-up menu: 

No Anti-Alias Disables text smoothing 

Crisp Anti-Alias Creates a sharp transition between the edges of the text and the background 

Strong Anti-Alias Creates a very abrupt transition between the edges of the text and the background, preserving the shapes of the text 
characters and enhancing detailed areas of the characters 

Smooth Anti-Alias Creates a soft transition between the edges of the text and the background 

Custom Anti-Alias Provides the following expert-level controls over anti-aliasing: 


Oversampling Determines the amount of detail used for creating the transition between the text edges and the background 
Sharpness Determines the smoothness of the transition between the text edges and the background 
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Strength Determines how much the text edges blend into the background 
Note: Text in vector files is anti-aliased when opened in Fireworks. 


Adjust the character width of selected characters 
& In the Property inspector, drag the Horizontal Scale pop-up slider or enter a value in the text box. Drag the slider higher than 100% to expand 
the width or height of the characters, and drag it lower to reduce their width or height. 100% is the default. 


Change the proximity of text to the baseline 
Baseline shift determines how closely text sits above or below its natural baseline, such as with subscript and superscript characters. If there is no 
baseline shift, the text sits on the baseline. Baseline shifts are measured in pixels. 


Non eSt quod contemnas hoc studendi genus. 
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Baseline Shift option in the Property inspector 


& In the Property inspector, drag the Baseline Shift pop-up slider or enter a value in the text box to specify how low or high to place the subscript 
or superscript text. Enter positive values to create superscript characters or negative values to create subscript characters. 


Save stroke, fill, and filter text attributes as a style 
You can apply strokes, fills, and filters to text in a selected text block and then save the text attributes as a style. After you create text, it remains 
editable in Fireworks. Strokes, fills, filters, and styles are updated automatically as you edit the text. 


Text with stroke, fill, filter, and style applied 


1. Create a text object and apply the attributes you want. Apply any style in the Styles panel, even if it's not a text style. 
2. Select the text object. 

3. Select New Style from the Styles panel Options menu. 

4. 


Select the style properties and name the new style. 


Attaching text to a path To the top 


As an alternative to rectangular text blocks, you can draw a path and attach text to it. The text flows along the shape of the path. Both the text and 
the path are editable. 


A path to which you attach text temporarily loses its stroke, fill, and filter attributes. Any stroke, fill, and filter attributes you apply subsequently are 
applied to the text, not the path. If you then detach the text from the path, the path regains its stroke, fill, and filter attributes. 


Note: Attaching text that contains hard or soft returns to a path can produce unexpected results. 
When the amount of text exceeds the space inside or outside a path, an icon appears to indicate surplus text that was not accommodated. Delete 
the excess text, or resize the path to accommodate the surplus text. The icon disappears when all the text is accommodated. 


Attach text to a path and edit it 
e To attach text to the perimeter of a path, Shift-select a text object and path, and then select Text > Attach To Path. 
e To place a text block inside a path, Shift-select a text object and path, and then select Text > Attach In Path. 
e To detach text from a selected path, select Text > Detach From Path. 


e To edit text attached to a path, double-click the text-on-a-path object with the Pointer or Subselection tool, or use the Text tool + click to 
select the text. 


e To edit the shape of the path, use the Subselection tool to select the text-on-a-path object, and drag the subselected points to reshape the 
path. 


Note: You can also use the Bezier Pen tool to edit the path. The text automatically flows around the path as points are edited. 


Change text orientation and direction on a path 
The order in which you draw a path establishes the direction of the text attached to it. For example, if you draw a path from right to left, the 
attached text appears backward and upside down. 
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Text attached to a path drawn right to left 


* Select Text > Orientation, and then select an orientation. 
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Text rotated around a path 
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Text oriented vertically on a path 
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Text skewed vertically around a path 
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Text skewed horizontally around a path 


e To reverse the direction of text on a selected path, select Text > Reverse Direction. 


e To move the starting point of text attached to a path, select the text-on-a-path object, and in the Property inspector, enter a value in the Text 
Offset text box. 


Attach text in path 
You can attach text into a vector object. Text is contained within the vector boundaries. Both text and the vector object remain editable. When you 
attach text within a path, the area within the path determines the amount of text that is visible. 


1. Select the text and vector object on the canvas. 


2. Select Text > Attach In Path. 


Convert text to paths 
Convert text to paths and then edit the shapes of the letters as you would any vector object. All vector-editing tools are available for text that is 
converted to paths. 


Note: Converted text can't be edited as text. 
e To convert text, select Text > Convert to Paths. 


e To edit converted text character paths individually, use the Subselection tool to select the converted text, or select the converted text and 
select Modify > Ungroup. 


e To create a composite path from a path group that was created by converting text to paths, select the path group, select Modify > Ungroup, 
and then select Modify > Combine Paths > Join. 


To the to 
Transform and convert text P 


Transform text blocks 


You can transform text blocks in the same ways you can transform other objects. You can scale, rotate, skew, and flip text to create unique text 
effects. 


Severe transformations can make the text difficult to read. When a text block transformation causes text to be resized or scaled, the resulting font 
size appears in the Property inspector when the text is selected. 


Solidify or split text 
You can convert text to composite vector objects. You cannot edit the text after you convert them to vector objects. Because the characters are 
joined together as a composite object, you must split the combined paths before you can edit the characters independently. 


e To solidify the text, select Commands > Text > Solidify. 


e To split the combined path into independently editable characters, use the subselection tool or select Modify > Combine Paths > Split. 
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To the to 
Import text P 


Fireworks supports only ASCII text and text is displayed as garbage characters when Unicode text file is opened or imported into Fireworks. 
Convert Unicode text to ASCII text before importing it into Fireworks. Alternatively, copy the ASCII text, and paste it into Fireworks. 


e To import text from Adobe Photoshop or Adobe Illustrator®, import a Photoshop or Illustrator file, or copy the text into Fireworks. 
You can copy text up to 8000 characters from within Fireworks, or from other applications. 


Q By default, text from Photoshop and Illustrator retains all attributes in Fireworks. However, you can also import Photoshop text as bitmap 
images. (See Photoshop Import and open preferences.) 


e To import text in RTF (rich text format) and ASCII (plain text) formats, copy it into Fireworks. You can also select File > Open or File > Import 
and navigate to a file. (Imported ASCII text is set to the current fill color and default font, 12 pixels high.) 


2 To thet 
Check spelling o the top 
Spell-check text 

1. Select one or more text blocks. If no text blocks are selected, Fireworks checks spelling in the entire document. 


2. Select Text > Check Spelling. 


Customize spell checking 
1. Select Text > Spelling Setup, or click the Setup button in the Check Spelling dialog box. 
2. Select options in the Spelling Setup dialog box: 
e Choose one or more language dictionaries. 
e Select a custom dictionary by clicking the folder icon beside the Personal Dictionary Path text box. 
e Edit the custom dictionary by clicking the Edit Personal Dictionary button and then adding, deleting, or modifying words in the list. 
e Select the types of words you want to include in the spell-check. 


More Help topics 


O 


Legal Notices | Online Privacy Policy 
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Selecting text 


Select word or paragraph 
& Double-click within a word to select the word, and triple-click to select the entire paragraph. 


Select parts of text in a paragraph 
& To select portions or parts of text in a paragraph, press Shift, and multi-select the portions of text. 


Select text with similar attributes 
& To select text with similar attributes, press Alt (Win)/Option (Mac OS) and double-click a word with the specified attributes. All words in a text 
block that match the attributes are automatically selected. 


For example, if you want to select all words with a bold typeface, press Alt (Win)/Option (Mac OS), and double click a word with the bold typeface. 
All the words in the text block with the bold typeface are automatically selected. 


Append text with dissimilar attributes to previous selection 
“* You can append previously selected text with text containing a different set of attributes. After you have selected text with bold typeface, use 
Alt+Shift+ double-click/Option+Shift+double-click on an italicized word. Words with bold typeface, and words with italic typeface are now selected. 


Append text to an existing selection 
“* To add words one by one to an existing selection, click within the text, and press Alt+Shift-click/Option+Shift-click. 


Deselect text from multi-selected text 
& To deselect text from multi-selected text individually, Alt-click/Option-click the specific selected text. 


More Help topics 
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Applying color, strokes, and fills 


Apply colors and save swatches 


Activate, remove, or swap the stroke and fill 

Apply and organize swatches 

Create and modify colors in the Color Mixer 

Create colors using the system color pickers 
Manage colors with the Color Palette panel 

Select colors from a color pop-up window 

Sample colors from a color pop-up window 

Identify color values 

Dither to simulate web-safe colors and transparency 
Save swatches 


z x To thet 
Activate, remove, or swap the stroke and fill file 


Activate the stroke or fill to determine which attribute your color adjustments affect. Reset stroke and fill colors to apply the defaults specified in 
the Preferences dialog box. 


Activate the stroke or fill color 
& In the Colors section of the Tools panel, click the icon to the left of the Stroke Color or Fill Color box. 


Note: The Paint Bucket tool fills pixel selections and vector objects with the color shown in the Fill Color box. 
#C8C8C8 


| Outside Path v (m Fill over stroke 
Ga 
AVA 
Oa 


Stroke and fill color boxes in the Tools panel, and the color pop-up window 


Reset stroke and fill colors to the default 
& Click the Set Default Stroke/Fill Colors button in the Tools panel or the Color Mixer. 


Remove the stroke and fill from selected objects 
“* Click the No Stroke Or Fill button in the Colors section of the Tools panel. To set the inactive characteristic to None, click the No Stroke Or Fill 
button again. 


Note: You can also remove the fill or stroke by clicking the Transparent button in any Fill Color or Stroke Color pop-up window, or by selecting 
None from the Fill Options or Stroke Options pop-up menu in the Property inspector. 


Swap the fill and stroke colors 
“* Click the Swap Stroke/Fill Colors button 5 in the Tools panel or Color Mixer. 


Apply and organize swatches si 


In the Swatches panel you can view, change, create, and edit swatch groups, as well as select stroke and fill colors. 


Apply a swatch color to the stroke or fill of a selected object 
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1. Click the icon next to the Stroke Color or Fill Color box in the Tools panel or Property inspector to make it active. 
2. Select Window > Swatches. 


3. Click a swatch to apply the color to the stroke or fill of the selected object. 


Select, change, or add swatch groups 


You can easily switch to another default swatch group or create your own. You can also import custom swatches from color palette files saved in 
ACT or GIF format. 


& To select a swatch group, select the group from the Swatches panel Options menu. 
Note: Selecting Color Cubes returns you to the default swatch group. 


e To select a custom swatch group, select Replace Swatches from the Swatches panel Options menu, navigate to the folder, and select the 
file. 


e To add swatches from an external color palette, select Add Swatches from the Swatches panel Options menu, navigate to the folder, and 
select an ACT or GIF color palette file. 


Add or replace a color in the Swatches panel 
Note: Selecting Edit > Undo does not undo swatch additions or deletions. 


1. Select the Eyedropper tool from the Tools panel. 
2. Select the number of pixels to sample from the Sample pop-up menu in the Property inspector: 1 pixel, 3x3 Average, or 5x5 Average. 
3. Click anywhere inside any open Fireworks document window to sample a color. 
e To add a color, move the tip of the eyedropper pointer to the open space after the last swatch in the Swatches panel. 
e To replace a swatch color, hold down Shift and place the pointer over a swatch in the Swatches panel. 
4. Click to add or replace the swatch. 


Q When you select Snap To Web Safe in the Options menu of the color pop-up window, any non-websafe color you pick up with the 
eyedropper pointer is changed to the nearest websafe color. 


Delete a swatch 
& To delete a swatch, hold down Control (Windows) or Command (Mac OS), place the pointer over a swatch, and click. 


Clear or sort swatches 
e To clear the entire swatch panel, select Clear Swatches from the Swatches panel Options menu. 


e To sort the swatches by color value, select Sort By Color from the Swatches panel Options menu. 


, z To the to 
Create and modify colors in the Color Mixer P 


Use the Color Mixer (Window > Color Mixer) to view and change the active stroke and fill colors. 


By default, the Color Mixer identifies RGB colors as hexadecimal, displaying hexadecimal color values for red (R), green (G), and blue (B) color 
components. Hexadecimal RGB values are calculated based on a range of values from 00 to FF. 


Color model Mode of color expression 


RGB Values of Red, Green, and Blue, where each component has a 
value from 0 to 255. 0-0-0 is black and 255-255-255 is white. 


Hexadecimal RGB values of Red, Green, and Blue, where each component 
has a hexadecimal value from 00 to FF. 00-00-00 is black and 
FF-FF-FF is white. 


HSB Values of Hue, Saturation, and Brightness. Hue has a value from 
0 to 360 degrees, and Saturation and Brightness have a value 
from 0% to 100%. 


CMY Values of Cyan, Magenta, and Yellow, where each component 
has a value from 0 to 255. 0-0-0 is white and 255-255-255 is 
black. 

Grayscale A percentage of black. The single Black (K) component has a 
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value from 0% to 100%, where 0 is white, 100 is black, and 
values in between are shades of gray. 


You can select alternative color models from the Color Mixer Options menu. The current color’s component values change with each new color 
model. 


Q Although CMY is a color model option, graphics exported directly from Fireworks are not ideal for printing. To repurpose exported Fireworks 
graphics for print, import them into Adobe Illustrator, Adobe Photoshop, or Adobe FreeHand. For more information, see the documentation for 
those applications. 


Apply color to a selected vector object 
1. In the Color Mixer, click the icon next to the Stroke Color or Fill Color box. 


2. Move the pointer over the color bar, and click. 


Pick a color 
1. Deselect all objects to prevent unwanted object editing as you mix colors. 
2. Click either the Stroke Color or Fill Color box 
3. Select a color model from the Color Mixer options menu. 
4 


. To specify color values, enter values in the color component text boxes, use the pop-up sliders, or pick a color from the color bar. 


Cycle through color models 
“+ Shift-click the color bar at the bottom of the Color Mixer. 
Note: The options in the Color Mixer do not change. 


š r To the to 
Create colors using the system color pickers E 
1. Click any color box. 
2. Select Windows OS or Mac OS from any color pop-up window Options menu. 
3. Select a color from the system color picker. 
To the top 


Manage colors with the Color Palette panel 


** To open the Color Palette panel, select Window > Others > Color Palette. 


anaging colors with the Color Palette pane 


Find the nearest websafe color for any color value 
1. Click the fill color box on the Selector tab of the Color Palette panel. 


2. To sample a color, use the eyedropper pointer to click anywhere inside any Fireworks document window. The nearest web safe color is 
displayed below the color in the active fill color box. 
Note: You can also use the Selector tab to convert colors between color models such as RGB and CMYK and to select the mode for 
displaying colors. 


Create and swap color palettes 

1. Select the Mixers tab in the Color Palette panel. 

2. Use the five fill color boxes at the bottom of the panel to set the four base colors for your document. 
3. If needed, use the HSB color wheel in the lower right corner of the panel to modify the palette. 
4 


. To try two different palettes in your document, click Palette2 on the left side of the panel, and then select the base colors for the second 
palette. 


5. To switch back and forth between the two palettes, click the two Replace color icons. 


Note: The swap palette function replaces fills, strokes, and gradients in vector elements, but not in bitmap elements or graphic symbols. 


Export a palette 
1. Select the palette you want to export (either Palette 1 or Palette 2). 


2. Click the Export As Bitmap icon to export the palette as a bitmap file, or click the Export As Color Table icon to export the palette as an ACT 
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file. 


Create a color gradation series 
1. Select the Blender tab in the Color Palette panel. 
2. Use the fill color boxes at the bottom of the panel to select the beginning and ending colors. 
3. Use the Steps pop-up slider to select the number of steps in the series. 


Note: To see the hexadecimal value of the color, place the pointer over any color swatch. 


Create a shared palette 
If you edit multiple images that have a restricted color palette, you can export a shared color palette that contains the colors in these images. To 
create a shared color palette, all images must reside in the same folder. 


1. Select Commands > Web > Create Shared Palette. 
2. Specify the maximum number of colors to include in the shared color palette. 


3. Click Browse to specify the folder that contains the images, and click OK. 


x To the to 
Select colors from a color pop-up window ä 


When you click any color box, a color pop-up window similar to the Swatches panel opens. 


Select a color for a color box 
1. Click a color box. 
2. Do one of the following: 
e To apply a swatch to the color box, click a swatch. 
e To apply the color to the color box, click the eyedropper pointer on a color anywhere on the screen. 


e To make the stroke or fill transparent, click the Transparent button in the pop-up window. 


Display the current Swatches panel swatch group 
“* Select the Swatches Panel from the color pop-up window Options menu. 


Display a different swatch group in the color pop-up window 
& Select a swatch group from the color pop-up window Options menu. 


Note: Selecting a swatch group here does not affect the Swatches panel. 


i To the top 
Sample colors from a color pop-up window 


When a color pop-up window is open, the pointer becomes a special eyedropper that can take up colors from almost anywhere on the screen. This 
process is known as sampling. 


1. Click any color box. 
2. Click anywhere in the Fireworks workspace to select and apply a color for the color box. 


Q Shift-click to select a websafe color. 
z To thet 
Identify color values eee 


In addition to the Color Mixer and color pop-up window, you can use the Info panel to identify color values. 


View the color value of any part of a document 
** Do one of the following: 


e Use the Color Mixer or color pop-up window. 


e Use the Info panel. Click the Eyedropper tool, select Window > Info, and move the pointer over the object containing the color you want to 
view (Windows only). 


View the color value of the active stroke or fill color 
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** Do one of the following: 
e Select Window > Color Mixer for RGB or other color system values. 
e Click a color box to open the color pop-up window and view the hexadecimal value at the top of the window. 
e Place the pointer over a color box and read the tool tip (Windows only). 


Note: By default, the color's RGB values appear in the Info panel and the Color Mixer. Its hexadecimal value appears in the color pop-up 
window. 


Display color information for a different color model 
& Select another color model from the Info panel Options menu or the Color Mixer Options menu. 


r To the to 
Dither to simulate web-safe colors and transparency P 


When using a color that is not websafe, apply a web dither fill. Doing so enables you to approximate a websafe color that doesn't shift or dither 
when exported with a websafe palette. 


To create the appearance of transparency, apply the Transparent dithering fill option. In transparent objects, the web page background shows 
through every other pixel of the transparent web dither fill. 


Note: Web dithering can increase the size of the file. 


Apply a web dither fill 
1. Select an object containing a non-websafe color. 
2. Select Web Dither from the Fill Options pop-up menu in the Property inspector. 


3. In the Property inspector, click the Fill Color box to display the Fill Options pop-up window. The object's non-websafe color appears in the 
Source color box. The two websafe dither colors appear in the color boxes to the right. The web dither appears on the object and becomes 
the active fill color. 

Note: Setting the edge of a web dither fill to Anti-Alias or Feather results in colors that are not websafe. 


4. Click outside the pop-up window to close it. 


Apply a transparent dither fill 
1. Select an object to which you want to apply a transparent fill. 
2. Select Web Dither from the Fill Options pop-up menu in the Property inspector. 
3. In the Property inspector, click the Fill Color box to display the Fill Options pop-up window. 
4. Select Transparent. 


The object on the canvas becomes semi-opaque or translucent. 


i 


Click outside the pop-up window to close it. 


6. Export the object as a GIF or PNG file and select Index Transparency or Alpha Channel Transparency. For more information, see Make 
areas transparent. 


Note: Not all browsers support PNG files. 


To the to 
Save swatches R 


Save a swatch group 
“* To save a selection of sampled colors, add the colors, select Save Swatches from the Swatches panel Options menu, and select a filename and 
directory. 


Saving swatches as ASE files 
ASE files contain colors that can be exchanged across applications like Photoshop, Illustrator, and InDesign. You can share colors that you have 
created in one application across the rest by sharing the ASE file. 


Fireworks supports RGB and CMYK color spaces. Swatches belonging to other color spaces are ignored. CMYK swatches are converted to RGB 
values and then imported into Fireworks. However, no information about the swatches converted from CMYK to RGB is explicitly displayed. 


Save swatches as an ASE file 


1. Open the set of swatches in the Swatches panel that you want to save. 
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2. In the options for the Swatches panel, select Save Swatches. 


3. Enter the name for the Swatches file, and save it. 


Import Swatches from other CS applications 
1. Open the set of swatches in the Swatches panel. 


2. In the options for the swatches panel, select Add Swatches. 
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Applying strokes and fills 


Work with strokes 
Work with fills 
Add three-dimensional effects to strokes and fills 


Work with strokes To the top 


Apply and change strokes 

You have full control of every brush nuance, including ink amount, tip size and shape, texture, edge effect, and aspect. You can apply changes to 
stroke attributes before or after creating objects. The pencil icon indicates the Stroke Color box in the Tools panel, the Property inspector, and the 
Color Mixer. 


Stroke settings, stroke categories, and stroke names of a selected object are retained across documents, and across application sessions. When 
you create an object in a new document in the current session, or in a new document after re-opening Fireworks, the last selected stroke settings 
are used. The settings persist across sessions. 


Q To apply a stroke to a bitmap object, use Photoshop Live Effects and select the Stroke attribute. (See Apply Live Filters.) 


Change stroke attributes of selected objects 
Do one of the following: 


e Select from among the stroke attributes in the Stroke Category pop-up menu in the Property inspector. 


e Select Stroke Options from the Stroke Category pop-up menu to see more options, and then select from among the stroke attributes. 


Change the stroke color of a drawing tool 
1. Press Control+D (Windows) or Command+D (Mac OS) to deselect all objects. 
2. Select a drawing tool in the Tools panel. 
3. Click the Stroke Color box in the Tools panel or Property inspector. 
4. Select a color and drag to draw the object. 


Note: A newly created stroke assumes the color currently displayed in the Stroke Color box. 


Remove stroke attributes from a selected object 
Do one of the following: 


e Select None from the Stroke Category pop-up menu in the Property inspector or the Stroke Options pop-up window. 


e Click the Stroke Color box in either the Tools panel or the Property inspector and click the Transparent button A. 


Align strokes 
Use the alignment options for strokes in the Property Inspector. (Align Stroke To Center, Align Stroke To Inside, and Align Stroke To Outside. The 
icons for alignment in the Property Inspector help quicker access to these options. 


Create and edit custom strokes 
Use the Edit Stroke dialog box to change specific stroke characteristics. 


Creating and editing custom strokes] 


Open the Edit Stroke dialog box 
Do one of the following: 
1. Click Edit Stroke in the Property Inspector. 


2. Each tab shows the current brush with the current settings. The current pressure- and speed-sensitivity settings are reflected in the preview 
by a stroke that tapers, fades, or otherwise changes from left to right. 


Set general brush stroke options 
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1. On the Options tab, set the ink amount, spacing, and flow rate. Higher flow rates create brush strokes that flow over time, as with an 
airbrush. 


2. Select brush stroke options: 
e To overlap brush strokes for dense strokes, select Build-up. 
e To set the stroke texture, change the Texture option. The higher the number, the more apparent the texture becomes. 
e To set texture on the edges, enter a number in the Edge Texture text box and select an edge effect from the Edge Effect pop-up menu. 


e Set the number of tips you want the brush stroke to have. For multiple tips, enter a Tip Spacing value and select the color variation 
method. 


e To select a dotted or dashed line, select an option from the Dash pop-up menu. 


e To set the lengths of dashes and spaces for a dotted line, use the three sets of On and Off text input boxes to control the first, second, 
and third dashes, respectively. 


3. Click OK. 


Modify the brush tip 
1. On the Shape tab, select Square for a square tip, or deselect it for a round tip. 
2. Enter values for the brush tip size, edge softness, tip aspect, and tip angle. 
3. Click OK. 


Note: Fireworks has stroke settings for fine-tuning the stroke attributes that are controlled by speed and pressure when you use a Wacom 
pressure-sensitive tablet and pen. You can select the stroke attribute to control with the pen. 


Set stroke sensitivity 
1. On the Sensitivity tab, select a stroke property from the Stroke Property pop-up menu. 


2. From the Affected By options, select the degree to which sensitivity data affects the current stroke property. 


Savel/delete custom strokes 
Click Save Custom Stroke or Delete Custom Stroke in the Property Inspector to save or delete a custom stroke. 


Move a brush stroke inside or outside a path 
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Centered stroke, stroke inside, and stroke outside 


Use the Stroke pop-up menu in the Stroke Options window to move brush strokes from the default position (centered on a path) to another 
location. 


1. In the Tools panel or Property inspector, click the Stroke box to open the color swatch pop-up window. 
2. At the bottom of the pop-up window, select either Inside Path or Outside Path from the pop-up menu. 
3. (Optional) Select the Fill Over Stroke option. 


The stroke normally overlaps the fill. Selecting Fill Over Stroke draws the fill over the stroke. When Fill Over Stroke is used with an object 
with an opaque fill, any part of the stroke that falls inside the path is obscured. A fill with a degree of transparency may tint or blend with a 
brush stroke inside a path. 


Create stroke styles 
You can change specific stroke characteristics such as ink amount, tip shape, and tip sensitivity, and save the custom stroke as a style for reuse 
across many documents. 


1. Do one of the following: 
e Click the Stroke Color box in the Tools panel and then click Stroke Options. 
e Select Stroke Options from the Stroke Options pop-up menu in the Property inspector. 


2. Edit the brush stroke attributes. 
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3. Click the Save Custom Stroke button to save the custom stroke attributes as a style for use in the future. 


Work with fills To the top 


Create and edit solid fills 
Create and use fills for vector objects and text, and use the Paint Bucket or Gradient tool to fill pixel selections based on current fill settings. 


The Paint Bucket icon È indicates the Fill Color box in the Tools panel, the Property inspector, and the Color Mixer. 


Change the solid fill color of vector drawing tools and the Paint Bucket tool 
1. Select a vector drawing tool or the Paint Bucket tool. 
2. Do one of the following: 


e Press Control+D (Windows) or Command+D (Mac OS) to deselect all objects, and then click the Fill Color box in the Property inspector 
to open the Fill Color pop-up window. 


e Click the Fill Color box in the Tools panel or Color Mixer to open the color pop-up window. 
3. Select a color for the fill from the set of swatches, or use the eyedropper pointer to sample a color from anywhere on the screen. 


Note: Selecting the Text tool always causes the Fill Color box to revert to the last solid text color used by the Text tool. 


Edit the solid fill of a selected vector object 
1. Click the Fill Color box in the Property inspector, Tools panel, or Color Mixer to open the color pop-up window. 


2. Select a swatch. 


Create and apply pattern and gradient fills 
e Use pattern fills to fill a path object with a bitmap graphic. 
e Use gradient fills to blend colors to create various effects. Fill categories other than None, Solid, Pattern, and Web Dither are gradient fills. 


Note: A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel. 


Apply a pattern fill to a selected object 
1. Do one of the following: 
e Select Pattern from the Fill Options pop-up menu in the Property inspector. 
e Click the Fill Color box in the Tools panel, click Fill Options, and select Pattern from the Fill Options pop-up menu. 


2. Select a pattern from the Pattern Name pop-up menu. 


Create a custom pattern fill from an external file 


Set a bitmap file as a new pattern fill, using files with these formats as patterns: PNG, GIF, JPEG, BMP, TIFF, and PICT (Mac OS only). When a 
pattern fill is a 32-bit transparent image, the transparency affects the fill when it is used in Fireworks. Images that are not 32-bit become opaque. 


1. With vector object properties displayed in the Property inspector, select Pattern from the Fill Options pop-up menu. 
2. Click the Fill Color box and select Other from the Pattern Name pop-up menu. 


3. Navigate to the bitmap file you want to use as the new pattern, and click Open. 


Apply a gradient fill to a selected object 
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“* Select a gradient from the Fill Options pop-up menu in the Property inspector. 


Objects with various gradient fills 


Edit a gradient fill 


j 


Cs ~ 


Edit Gradient pop-up window 


1. Select an object that has a gradient fill or select a gradient fill from the Fill Options pop-up menu in the Property inspector. 
2. Click the Fill Color box in the Property inspector or Tools panel to open the pop-up window. 
3. Do any of the following: 
e To add anew color swatch, click the area below the gradient color ramp. 
e To add an opacity swatch, click the area above the gradient color ramp. 
e To remove a color or opacity swatch from the gradient, drag the swatch away from the Edit Gradient pop-up window. 
e To set or change the color of a color swatch, click the color swatch and select a color. 


e To set or change the transparency of an opacity swatch, click the opacity swatch and either drag the slider to the percentage of 
transparency (0 is completely transparent and 100 is completely opaque), or enter a numeric opacity value from O to 100. Then press 
Enter or click outside the Edit Gradient pop-up window. 


Note: The transparency checkerboard shows through the gradient in transparent areas. 


e To adjust the transition between colors in the fill, drag color swatches left or right. 


Create fills with the Gradient tool 
Use the Gradient tool to fill an object with a gradient instead of a solid color. The Gradient tool retains the properties of the last-used element. 


1. Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu. 
2. Select attributes in the Property inspector. 


3. Click and drag the pointer to establish a starting point of the gradient and the direction and length of the gradient area. 


Reduce banding for gradients 


Reduce the amount of banding for gradients using this option. You can apply dithering only to vector objects that have linear or radial gradients. 
Dithering is lost when you import the file into a previous version of Fireworks. 


1. Draw a vector object, and fill it with a linear or radial gradient. 
2. In the Fill Options dialog, set the Edge to Anti-Alias. 

3. Set the Texture to 0%. 
4 


. Select Dither. 
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Transform and distort fills 


You can move, rotate, skew, and change the width of an object's pattern or gradient fill. When you use the Pointer or Gradient tools to select an 
object with a pattern or gradient fill, a set of handles appears on or near the object. Drag the handles to adjust the object's fill. 


Use the fill handles to interactively adjust a pattern or gradient fill. 


e To move the fill within an object, drag the round handle, or use the Gradient tool to click in a new location. 
e To adjust the fill width and skew, drag a square handle. 
e To rotate the fill, drag the lines connecting the handles. 


Q To rotate a fill in 45-degree increments, hold down Shift as you drag. 


Modify the edges of fills 
The edges of a fill can be a regular hard line or can be softened by anti-aliasing or feathering. 


By default, edges are anti-aliased. Anti-aliasing subtly blends the edge into the background to smooth the jagged edges that can occur on 
rounded objects such as ellipses and circles. 


Feathering produces a noticeable blending on either side of the edge. This blending softens the edge, creating an effect similar to a glow. 
1. Do one of the following: 
e Click the Edge pop-up menu in the Property inspector. 
e Click the Fill Color box in the Tools panel, click Fill Options, and click the Edge pop-up menu. 
2. Select an edge option: Hard, Anti-Alias, or Feather. 


3. For a feathered edge, select the number of pixels (between 0 and 100) on each side of the edge that is to be feathered. The default is 10. 
The higher the level, the more feathering occurs. 


Save a custom gradient fill 
& To save the current gradient settings as a custom gradient for use across many documents, create a style. 


Remove a fill from a selected object 
Do one of the following: 


e Select None from the Fill Options pop-up menu in the Property inspector or from the Fill Options pop-up menu in the Fill Options pop-up 
window. 


e Click any Fill Color box and click the Transparent button. This option removes only solid fills. 
z $ . To the top 
Add three-dimensional effects to strokes and fills 


Add three-dimensional effects to both strokes and fills by adding texture. Textures modify brightness but not hue and give strokes and fills a more 
organic look. Textures are more effective when used with wide strokes. 


roa 


3 
4 


i 
f; 
# 
d < 


Use the Stroke options in the Property inspector or the Stroke Options pop-up window to add a texture to a brush stroke. 
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Add texture to a stroke or fill 
1. Do one of the following: 
e Click the Stroke Texture pop-up menu or the Fill Texture pop-up menu in the Property inspector. 
e Click the Stroke Color box or Fill Color box in the Tools panel, click Stroke Options or Fill Options, and click the Texture pop-up menu. 
2. Do one of the following: 
e Select a texture from the pop-up menu. 
e Select Other from the pop-up menu and navigate to a texture file. 
Note: Textures can be applied to files that are in these formats: PNG, GIF, JPEG, BMP, TIFF, and PICT (Mac OS only). 
3. Enter a percentage from 0 (lowest intensity) to 100 (highest intensity) to control the depth of the texture. 


4. (Fills only) Select Transparent to introduce a level of transparency to the fill. 


Add acustom texture 


** Use bitmap files from Fireworks and other applications as textures. Apply textures from files that are in these formats: PNG, GIF, JPEG, BMP, 
TIFF, and PICT (Mac OS only). 


Create a new texture from an external file 
1. With vector object properties displayed in the Property inspector, select Other from either of the Texture Name pop-up menus. 


2. Navigate to the bitmap file you want to use as the new texture, and click Open. 
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Using Live Filters 
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Create effects with Live Filters 


Applying Live Filters 
Edit and customize Live Filters 


a z z To the to 

Applying Live Filters j 
Adobe® Fireworks® Live Filters (formerly known as Live Effects) are enhancements that you can apply to vector objects, bitmap images, and text. 
Live Filters include bevels and embossing, solid shadows, drop shadows and glows, color correction, and blurring and sharpening. You can apply 
Live Filters to selected objects directly from the Property inspector. 


About Live Filters 

Fireworks updates Live Filters when you edit objects that have them applied. After you apply a Live Filter, you can change its options anytime, or 
rearrange the order of filters to experiment with a combined filter. You can turn Live Filters on and off or delete them in the Property inspector. 
When you remove a filter, the object or image returns to its previous appearance. 


None 
Options d 
Adjust Color > 
Inner Bevel 
Blur > — Inset Emboss 
Noise > Outer Bevel 
41 Ib Other > Raised Emboss 
EE Shadow and Glow > 
Sharpen > 
gfo ; 
-~ Photoshop Live Effects 
Filters: |F 


Live Filters pop-up menu in the Property inspector 
e Some filters (such as Auto Levels, Gaussian Blur, and Unsharp Mask) that were irreversible plug-ins or filters are now also available as 
Fireworks Live Filters. 
e You can add third-party plug-ins as Live Filters or use these filters in the traditional manner using the Filters menu. 
e When the Property inspector is at half height, click Edit Filters or Add Filters to display the Live Filters pop-up menu. 
Note: A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel. 


e When customizing Live Filters, experiment with the settings until you get the look you want. 
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Inner Bevel pop-up menu window 
A. Width of bevel B. Button bevel preset C. Contrast D. Softness E. Angle of bevel 


Apply Live Filters 


Apply a Live Filter to selected objects 
1. Click plus (+) icon next to the Filters label in the Property inspector, and then select a filter from the Add Live Filters pop-up menu. 


The filter is added to the Live Filters list for the selected object. 
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9 To apply a Live Filter so that it appears to affect only a pixel selection within an image, you can cut and paste the selection in place to 
create a bitmap image, select it, and then apply the Live Filter. 


2. If a pop-up menu or dialog box opens, enter the settings for the filter and do one of the following: 
e Ifthe Live Filter has a dialog box, click OK. 
e Ifthe Live Filter has a pop-up menu, press Enter or click anywhere in the workspace. 

3. Repeat steps 1 and 2 to apply more Live Filters. 


Note: The order in which Live Filters are applied affects the overall filter. Drag Live Filters to rearrange their stacking order. 


Enable or disable a Live Filter applied to an object 
“+ Click the box next to the filter in the Filters list in the Property inspector. 


Enable or disable all Live Filters applied to an object 
“* Click the plus (+) icon next to the Filters label in the Property inspector, and then select Options > All On or Options > All Off from the pop-up 
menu. 


Save applied effects 
“» After adding and editing a Live Filter, click outside the setting's pop-up menu or press Enter. 


Apply beveled edges 
A beveled edge gives an object a raised look. 


A rectangle, with Inner Bevel, and with Outer Bevel 
1. Click the plus (+) icon next to the Filters label in the Property inspector, and then select a bevel option from the pop-up menu. 


2. Edit the filter settings in the pop-up menu. 


Apply embossing 
The Emboss Live Filter makes an image, object, or text appear inset into or raised from the canvas. 


An object, with Inset Emboss, and with Raised Emboss 


1. Click the plus (+) icon next to the Filters label in the Property inspector, and then select an emboss option from the pop-up menu. 
2. Edit the filter settings. 
If you want the original object to appear in the embossed area, select Show Object. 


Note: For backward compatibility, in older documents, the Show Object option is deselected for objects that have Emboss Live Filters 
applied. 


Apply shadows and glows 
Choose from a variety of shadows and then specify the shadow's angle to simulate light shining on the object. 


Filter settings for shadows 
The options that are available vary by the type of shadow. 
e To set the direction of the shadow, drag the Angle slider. 


e To set the distance of the shadow from the object, drag the Distance slider. 

e To apply solid color to the shadow, select the Solid Color option. 

e To set the shadow color, open the color pop-up menu and set the shadow color. 
e To set the percentage of transparency in the shadow, drag the Opacity slider. 
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e To set the sharpness of the shadow, drag the Softness slider. 
e To see a preview of the shadow, click the Preview option. 
e To hide the object and display only the shadow, select Knock Out. 


Apply a solid shadow 
1. In the Property inspector, click the plus (+) icon next to the Filters label, point to Shadow and Glow, and then click Solid Shadow. 
2. In the Solid Shadow dialog box, adjust the filter settings. 
3. When you finish, click OK. 


Apply a drop shadow or inner shadow 
1. Click the plus (+) icon next to the Filters label in the Property inspector, and then select a shadow option from the pop-up menu: 
e Shadow and Glow > Drop Shadow. 
e Shadow and Glow > Inner Shadow. 


2. Edit the filter settings in the pop-up menu. 


Apply a glow 
1. Click the Add Filters button in the Property inspector, then select Shadow and Glow > Glow. 
2. Edit the filter settings in the pop-up menu: 
e To set the glow color, click the color box. 
e To set the width of the glow, drag the Width slider. 
e To set the percentage of transparency in the glow, drag the Opacity slider. 
e To set the sharpness of the glow, drag the Softness slider. 


e To specify the distance of the glow from the object, drag the Offset slider. 


Apply filters and Photoshop plug-ins as Live Filters 

Note: The menu known as the Xtras menu in some previous versions of Fireworks is called the Filters menu in Fireworks 8 and later. Fireworks 
Xtra extensions are now known as filters. 

Applying built-in filters and plug-ins in the Add Filters pop-up menu as Live Filters ensures that you can edit or remove them from an object. 


Use the Filters menu to apply filters and Adobe Photoshop® plug-ins only when you are certain that you will not want to edit or remove the filter. 
You can remove a filter only if the Undo command is available. 


Install and apply Photoshop plug-ins 
1. In the Property inspector, click the Add Filters button, and then select Options > Locate Plugins. 
2. Navigate to the folder where the Photoshop plug-ins are installed and click OK. 
3. Restart Fireworks to load the plug-ins. 


Note: Ifyou move the plug-ins to a different folder, repeat the above steps, or select Edit > Preferences and click the Plug-ins tab to 
change the path to the plug-ins. Then restart Fireworks. 


4. To apply the Photoshop plug-in to a selected object, in the Property inspector, click the plus (+) icon next to the Filters label, and then select 
a filter from the Options submenu. 


Apply Photoshop layer effects Note: If you import a PSD file, you can also edit layer effects that already exist in the file. 
1. In the Property inspector, click the Add Filters button, and then select Photoshop Live Effects. 
2. Select one of the effects in the left-hand pane, and then edit the settings in the right-hand pane. You can select multiple effects at once. 


Apply filters to grouped objects When you apply a filter to a group, the filter is applied to all objects in the group. If the objects 
are ungrouped, each object's filter settings revert to those applied to the object individually. 


To apply a filter to an individual object within a group, select only that object with the Subselection tool. 


Edit and customize Live Filters ee 


Edit Live Filter settings 
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1. In the Property inspector, click the info button next to the filter you want to edit. 
2. Adjust the filter settings. 
Non-editable filters are dimmed. 


3. Click outside the window or press Enter. 


Reorder or remove Live Filters 


Reorder Live Filters 
You can rearrange the order of the filters applied to an object. Reordering filters changes the sequence in which the filters are applied, which can 
result in changes to the combined filter. Filters at the top of the list are applied before the filters at the bottom. 


In general, filters that change the interior of an object, such as the Inner Bevel filter, should be applied before filters that change the object's 
exterior. For example, you should apply the Inner Bevel filter before you apply the Outer Bevel, Glow, or Shadow filter. 


& To reorder filters, drag a filter to a different position in the list in the Property inspector. 


Remove a single filter applied to a selected object 
& Select the filter you want to remove from the Filters list in the Property inspector, and then click the Delete Live Filters button. 


Remove all filters from a selected object 
“+ In the Property inspector, click the plus (+) icon next to the Filters label, and then select None from the pop-up menu. 


Create custom Live Filters 


Custom Live Filters are styles with all property options deselected except for the Filter option. To save a particular combination of settings for Live 
Filters, create a custom Live Filter. 


Create a custom Live Filter using the Styles panel 
1. Apply Live Filter settings to selected objects. For more information, see Applying Live Filters. 
2. Select New Style from the Styles panel Options menu. 
3. Deselect all properties except the Effect property, enter a name, and click OK. 
A style icon representing the Live Filter is added to the Styles panel. 


Note: Ifyou select any additional properties in the New Style dialog box, the style will no longer be an item on the Add Live Filters pop-up 
menu in the Property inspector, although it will remain on the Styles panel as a typical style. 


Apply a custom Live Filter to selected objects 
** Click the icon for the custom Live Filter in the Styles panel. 


You can rename or delete a custom Live Filter as you would any other style in the Styles panel. You can't rename or delete a standard Fireworks 
filter. 


Save Live Filters as commands 
Save and reuse a filter by creating a command based on it. The command can be used in batch processing. 


1. Apply the filters to the object. 

2. If the History panel is not visible, select Window > History. 

3. Shift-click the range of actions you want to save as a command. 

4. Do one of the following: 
e Select Save As Command from the History panel Options menu. 
e Click the Save button at the bottom of the History panel. 


5. Enter a command name and click OK to add the command to the Commands menu. 
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Layers, masking, and blending 


Blending and transparency 


About blending modes 
Examples of blending modes 
Adjust opacity and apply blends 
About the Color Fill Live Filter 


Blending techniques give you another level of creative control. You can create unique effects by blending the colors in overlapping objects. 
Fireworks has several blending modes to help you achieve the look you want. 


Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. In Fireworks, blending modes allow 
you to create composite images. 


z To the to 
About blending modes p 
When you select a blending mode, Fireworks applies it to the selected objects in their entirety. Objects in a single document or on a single layer 
can have blending modes that differ from those of other objects in the document or on the layer. 


When objects with different blending modes are grouped, the group's blending mode overrides individual blending modes. Ungrouping the objects 
restores each object's individual blending mode. 


Note: Blending modes within a symbol are ignored when you exit the symbol edit mode. 


Elements in a blending mode 

Blend color The color to which the blending mode is applied. 

Opacity The degree of transparency to which the blending mode is applied. 
Base color The color of pixels underneath the blend color. 

Result color The result of the blending mode's effect on the base color. 


Blending modes 
Usage of hue, saturation and color blend mode works the same way as in Photoshop. For more information on blending modes, see Jim 
Babbage's article on blending modes. 


Normal Applies no blending mode. 

Dissolve Randomly chooses colors between the current and background layer to create the blend effect. 

Darken Selects the darker of the blend color and base color to use as the result color. This mode replaces only pixels that are lighter than the 
blend color. 

Multiply Multiplies the base color by the blend color, resulting in darker colors. 

Color Burn Darkens the base color in each channel to reflect the blend color by increasing the contrast. Blending with white produces no 
change. 

Linear Burn Inspects each channel of the current and background layers and darkens the background color to reflect the blend color by 
decreasing the brightness. The overall effect is to darken the image. The neutral color is white, so Linear Burn blending with white has no effect. 
Lighten Selects the lighter of the blend color and base color to use as the result color. This mode replaces only pixels that are darker than the 
blend color. 

Screen Multiplies the inverse of the blend color by the base color, resulting in a bleaching effect. 

Color Dodge Brightens the base color to reflect the blend color by decreasing the contrast. Blending with black produces no change. 

Linear Dodge Inspects each channel of the current and background layers and lightens the background color to reflect the blend color by 
increasing the brightness. The overall effect is to lighten the image. The neutral color is black, so Linear Dodge blending with black has no effect. 
Overlay Multiplies or screens the colors, depending on the base color. Patterns or colors overlay the existing pixels while preserving the highlights 
and shadows of the base color. The base color is not replaced, but mixed with the blend color to reflect the lightness or darkness of the original 
color. 

Soft Light Darkens or lightens the colors, depending on the blend color. The effect is like shining a diffused spotlight on the image. If the blend 
color (light source) is lighter than 50% gray, the image is lightened like it was dodged. If the blend color is darker than 50% gray, the image is 
darkened like it was burned in. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or 
white. 

Hard Light Multiplies or screens the colors, depending on the blend color. The effect is like shining a harsh spotlight on the image. If the blend 
color (light source) is lighter than 50% gray, the image is lightened, like it was screened. This is useful for adding highlights to an image. If the 
blend color is darker than 50% gray, the image is darkened, like it was multiplied. This is useful for adding shadows to an image. Painting with 
pure black or white results in pure black or white. 

Vivid Light A contrast-increasing blend mode that combines the effects of the Color Burn and Color Dodge modes. If the blend color is darker 
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than mid-gray, Vivid Light darkens or burns the image by increasing the contrast. Otherwise, the image is lightened or dodged by decreasing the 
contrast. 


Linear Light A combination of Linear Burn and Linear Dodge that adjusts brightness. If the blend layer color is darker than mid-gray, Linear Light 
decreases the image brightness. Otherwise, Linear Light increases the image brightness. 

Pin Light Replaces the color, depending on the blend color. If the blend color is lighter than 50% gray, pixels darker than the blend color are 
replaced. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced. 

Hard Mix Reduces the colors in an image to just eight pure colors. 

Difference Subtracts the blend color from the base color or the base color from the blend color. The color with less brightness is subtracted from 
the color with more brightness. 

Exclusion Creates an effect like but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with 
black produces no change. 

Hue Combines the hue value of the blend color with the luminance and saturation of the base color to create the result color. 

Saturation Combines the saturation of the blend color with the luminance and hue of the base color to create the result color. 

Color Combines the hue and saturation of the blend color with the luminance of the base color to create the result color. This mode preserves the 
gray levels for coloring monochrome images and tinting color images. 

Luminosity Combines the luminance of the blend color with the hue and saturation of the base color. 

Invert Inverts the base color. 

Tint Adds gray to the base color. 

Erase Removes all base color pixels, including those pixels in the background image. 

For general information and examples regarding blending modes—in particular, Photoshop blending modes—see the following website: 
www.pegtop.net/delphi/articles/blendmodes/. 


7 To thet 
Examples of blending modes ae 


Original image 


Difference 


Saturation 


Luminosity 
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To the top 


Adjust opacity and apply blends 


Use the Property inspector or the Layers panel to adjust the opacity of selected objects and to apply blending modes. An Opacity setting of 100 
renders an object completely opaque. A setting of O (zero) renders an object completely transparent. 


You can also specify a blending mode and opacity before you draw an object. 


Specify a blending mode and opacity before you draw an object 
& With the desired tool selected in the Tools panel, set blend and opacity options in the Property inspector before you draw the object. 


Note: Blend and opacity options are not available for all tools. 


Set a blending mode and opacity level for existing objects 
1. With two objects overlapping, select the top object. 
2. Select a blending option from the Blend Mode pop-up menu in the Property inspector or the Layers panel. 


3. Select a setting from the Opacity pop-up slider, or type a value in the text box. 


Set a default blending mode and opacity level to be applied to objects as you draw them 
1. Choose Select > Deselect to avoid inadvertently applying a blending mode and opacity. 
2. With a vector or bitmap drawing tool selected, select a blending mode and opacity level in the Property inspector. 


The blending mode and opacity level you select are used as the default for any objects you subsequently draw with that tool. 


About the Color Fill Live Filter TOSAR 


The Fireworks Color Fill Live Filter lets you adjust the color of an object by altering the object's opacity and blend mode. The Color Fill filter 
produces the same effect as overlapping an object with one that has a different opacity and blend mode. 
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Layers 


Activate a layer 

Add and remove layers 

Manage layers 

Use the Web Layer 

Importing Photoshop grouped layers 


Layers divide an Adobe® Fireworks® document into discrete planes, as though the components of the illustration were drawn on separate tracing 
paper overlays. A document can be made up of many layers, each containing many sublayers or objects. Fireworks layers are similar to layer sets 
in Adobe Photoshop®. Photoshop layers are similar to individual Fireworks objects. 


Each object in a document resides on a layer. You can either create layers before you draw or add layers as needed. The canvas is below all 
layers and is not itself a layer. 


The Layers panel displays the current state of all layers in the current state or page of a document. The name of the active layer is highlighted. 
The stacking order is the order in which objects appear in the document and determines how objects on one layer overlap objects on another. 
Fireworks places the most recently created layer on the top of the stack. You can rearrange the order of layers and of objects within layers, and 
you can create sublayers and move objects onto them. 


Masks and opacity and blend mode controls are also shown in the Layers panel. 


A. Expand/Collapse Layer B. Lock/Unlock Layer C. Show/Hide Layer D. Active Layer E. Delete Layer F. New/Duplicate Layer G. New Sub 
Layer H. Add Mask I. New Bitmap Image 


Activate a layer coher 
Objects that you draw, paste, or import are placed at the top of the active layer. 
** Do one of the following: 
e Click a layer name in the Layers panel. 
e Select an object on a layer. 
To the top 


Add and remove layers 


Using the Layers panel, you can add new layers, add new sublayers, delete unwanted layers, and duplicate existing layers and objects. 
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Add a layer 
A blank layer is inserted above the currently selected layer and becomes the active layer. 


& Do one of the following: 
e Click the New/Duplicate Layer button ®. 
e Select Edit > Insert > Layer. 


e Select New Layer or New Sub Layer from the Layers panel Options menu or pop-up menu, and click OK. 


Delete a layer 
The layer above the deleted one becomes the active layer. If the deleted layer is the last one remaining, a new empty layer is created. 


** Do one of the following: 
e Drag the layer to the trash can icon Ẹ in the Layers panel. 
e Select the layer and click the trash can icon in the Layers panel. 
e Select the layer and choose Delete Layer from the Layers panel Options menu or pop-up menu. 


Q You can use the Delete Empty Layers extension to remove all empty normal and web layers across all states and pages in the current 
document. This extension is available at http:/www.adobe.com/go/learn_fw_deleteemptylayers_en. 


Duplicate a layer and objects 
A duplicate layer contains the same objects as the currently selected one. Duplicated objects retain the opacity and blending mode of the original 
objects. You can change the duplicated objects without affecting the originals. 


** Do one of the following: 
e Drag a layer to the New/Duplicate Layer button. 


e Select a layer and choose Duplicate Layer from the Layers panel Options menu or pop-up menu. Then select the number of duplicate layers 
to insert and where to place them in the stacking order. Because the Web Layer is always the top layer, the At The Top option means just 
below the Web Layer. 


Duplicate an object 
& Alt-drag (Windows) or Option-drag (Mac OS) an object. 


To thet 
Manage layers eee 


Expand or collapse layers 
To eliminate clutter in the Layers panel, collapse the display of layers. To view or select specific objects on a layer, expand the layer. 


e To expand or collapse a single layer, click the triangle to the left of the layer name. 


e To expand or collapse all layers, Alt-click (Windows) or Option-click (Mac OS) the triangle to the left of the layer name. 


Organize layers 
You can organize layers and objects in a document by naming them and rearranging them in the Layers panel. Objects can be moved within a 
layer or between layers. 


Moving layers and objects in the Layers panel changes the order in which objects appear on the canvas. Objects at the top of a layer appear 
above other objects in that layer on the canvas. Objects on the topmost layer appear in front of objects on lower layers. 


Note: The Layers panel auto-scrolls when you drag a layer or object up or down beyond the bounds of the viewable area. 


Name a layer or object 
1. Double-click a layer or object in the Layers panel. 
2. Type anew name for the layer or object and press Enter. 


Note: Although the Web Layer cannot be renamed, you can rename its sublayers and web objects, such as slices and hotspots. 


Move a single layer or object 
“* Drag the layer or object to a new location in the Layers panel. 


Move all selected objects on a layer 
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** Do one of the following: 
e Drag the radio button next to the layer's name to another layer. 
e Click once in the right column of the destination layer. 


Note: A parent layer cannot be dragged into its child layer. 


Protect and lock layers and objects 

Locking an individual object protects it by preventing it from being selected or edited, and locking a layer protects all objects on that layer. A 
padlock icon @ indicates a locked item. The Single Layer Editing feature protects objects on all but the active layer and sub layers from unwanted 
selection or changes. You can also protect objects and layers by hiding them. 


Note: Hidden layers and objects are not included when you export a document. Objects on the Web Layer can always be exported, whether or 
not they are hidden. For more information about exporting, see Export from the workspace. 
Lock objects and layers 

e To lock an object, click the square in the column immediately to the left of the object name. 

e To lock a layer, click the square in the column immediately to the left of the layer name. 

e To lock multiple layers, drag the pointer along the Lock column in the Layers panel. 


e To lock or unlock all layers, select Lock All or Unlock All from the Layers panel Options menu or pop-up menu. 


Turn on or off Single Layer Editing 
& Select Single Layer Editing from the Layers panel Options menu or pop-up menu. 


A check mark indicates that Single Layer Editing is active. 


Show or hide objects and layers 


e To show or hide a layer or objects on a layer, click the square in the first left column against a layer or object name. The eye icon ® 
indicates that a layer or object is visible. 


e To show or hide multiple layers or objects, drag the pointer along the Eye column in the Layers panel. 


e To show or hide all layers and objects, select Show All or Hide All from the Layers panel Options menu or pop-up menu. 


Hide or lock other layers 
Hide or lock all layers except the current to achieve precise editing of a logo or an icon. 


1. Select the layer you want to work on from the Layers panel. 


2. Select Commands > Document > Hide Other Layers, or Commands > Document > Lock Other Layers. 


Merge objects in the Layers panel 
To alleviate clutter, you can merge objects in the Layers panel. Objects and bitmaps to be merged do not have to be adjacent in the Layers panel 
or reside on the same layer. 


Merging down causes all selected vector objects and bitmap objects to be flattened into the bitmap object that lies just beneath the bottommost 
selected object. The result is a single bitmap object. Vector objects and bitmap objects cannot be edited separately once merged, and editability 
for vector objects is lost. 


1. Select an object on the Layers panel that you want to merge with a bitmap object. Shift-click or Ctrl-click to select multiple objects. 


Q You can merge the contents of a selected layer into a bitmap object that is the topmost object on the layer immediately beneath the 
selected layer. 


2. Do one of the following: 
e Select Merge Down from the Layers panel Options menu. 
e Select Modify > Merge Down. 
e Right-click (Windows) or Control-click (Mac OS) the selected objects on the canvas and select Merge Down. 


Note: Merge Down does not affect slices, hotspots, or buttons. 


Distribute objects to layers 

If you have many objects in a layer, you can avoid clutter in a layer by distributing the objects to new layers. New layers at the same level as the 
parent layer are created. Also, the newly created layers maintain the hierarchy of layers. Distributing cluttered objects helps you manipulate objects 
better. 
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1. Select the layer with the objects you want to distribute. 


2. Select Commands > Document > Distribute To Layers. 


Share layers 
When you share a layer across pages or states, you can update an object on a layer and it is updated in all pages or states. Share layers when 
you want objects such as background elements to appear on all pages of a website or all states of an animation. 


For more information, see http://www.adobe.com/go/learn_fw_usingpagesstates_en 
Note: Sublayers cannot be shared across pages or states; select the parent layer to share. 
Share the selected layer across states 
& Do one of the following: 
e From the Layers panel Options menu or pop-up menu, select Share Layer To States. 
e Select New Layer from the Layers panel Options menu or pop-up menu, and select Share Across States. 


The layer shared across states appear with a film icon against it in the Layers panel. 


Share the selected layer across pages 
“* From the Layers panel Options menu or pop-up menu, select Share Layer to Pages. 


The layer shared across pages appear with a page icon against it in the Layers panel. 


Disable the sharing of a layer 
1. Select the shared layer and deselect Share Across States from the Layers panel Options menu or pop-up menu. 
2. Specify how to copy objects to states: 
e Retain the contents of the shared layer in the current state only. 


e Copy the contents of the shared layer to all states. 


Use the Web Layer To the top 


The Web Layer appears as the top layer in each document. It contains web objects, such as slices and hotspots, used for assigning interactivity to 
exported Fireworks documents. 


You cannot unshare, delete, duplicate, move, or rename the Web Layer. You also cannot merge objects that reside on the Web Layer. It is always 
shared across all the states of a page, and web objects are visible on every state of a page. 


Rename a slice or hotspot in the Web Layer 
1. Double-click the slice or hotspot in the Layers panel. 
2. Type the new name, and then click outside the window or press Enter. 


Note: The new name is used when the slice is exported. 


Importing Photoshop grouped layers To the top 


Photoshop files that contain layers are imported with each layer placed as a separate object on a single Fireworks layer. Grouped layers are 
imported as individual layers, as if the layers were ungrouped in Photoshop before being imported into Fireworks. The clipping effect on Photoshop 
grouped layers is lost on import. 
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Masking 


Vector and bitmap masks 

Create a mask from an existing object 

Use auto vector mask 

Mask an object 

Importing and exporting Photoshop layer masks 
Group objects to form a mask 

Select, move, and edit masks 

Change the way masks are applied 


Masking allows you to block out part of the underlying image. For example, you can paste an elliptical shape as a mask on top of a photograph. All 
areas outside the ellipse disappear as if cropped, showing only the part of the picture inside the ellipse. 


Masks hide or show parts of an object or image. You can use several masking techniques to achieve many kinds of creative effects with objects. 


A mask can act as a cookie cutter, cropping or clipping underlying objects or images. Others give the effect of a foggy window, revealing or hiding 
portions of the objects beneath it. 


You can create a mask object from either a vector object (a vector mask) or a bitmap object (a bitmap mask). You can also use multiple objects or 
grouped objects to create a mask, and you can use text (which creates a vector mask). After you create a mask, you can adjust the position of the 
masked selection on the canvas or modify the appearance of the mask. You can also apply transformations to the mask as a whole or to the 
components of a mask individually. 


Vector and bitmap masks To the top 


About vector masks 


Vector masks, which are sometimes called clipping paths or paste insides, are used in vector-illustration applications. The vector mask object 
crops or clips the underlying objects to the shape of its path, creating a cookie-cutter effect. 


A vector mask applied using its path outline 


When you create a vector mask, a mask thumbnail with a pen icon appears in the Layers panel. 


A vector mask thumbnail in the Layers panel 


When a vector mask is selected, the Property inspector displays information about how the mask is applied. The bottom half of the Property 
inspector displays additional properties that allow you to edit stroke and fill of the mask object. 


By default, vector masks are applied using their path outline, but you can also apply them in other ways. 


About bitmap masks 
Fireworks bitmap masks are like Photoshop layer masks in that the pixels of the mask object affect the visibility of underlying objects. 


131 


Original objects and a bitmap mask applied using its grayscale appearance 
You can apply bitmap masks in two ways: 
e Using an existing object to mask other objects. This technique is like applying a vector mask. 


e Creating an empty mask. Empty masks start out as either transparent or opaque. A transparent (or white) mask shows the masked object in 
its entirety, and an opaque (or black) mask hides the masked object completely. You can use the bitmap tools to draw on or modify the mask 
object, revealing, or hiding the underlying objects. 


When you create a bitmap mask, the Property inspector displays information about how the mask is applied. If you select a bitmap tool when 
a bitmap mask is selected, the Property inspector displays the properties of the mask and options for the selected tool. 


By default, most bitmap masks are applied using their grayscale appearance, but you can also apply them using their alpha channel. 


è gi a To thet 
Create a mask from an existing object KEREN 


When a vector object is used as a mask, its path outline can be used to clip or crop other objects. When a bitmap object is used as a mask, either 
the brightness of its pixels or its transparency affects the visibility of other objects. 


Mask objects by using the Paste As Mask command 


Using the Paste As Mask command, you can create masks by overlapping an object or group with another object. Paste As Mask creates either a 
vector mask or a bitmap mask. 


1. Select the object you want to use as the mask. Shift-click to select multiple objects. 
Note: Ifyou use multiple objects as the mask, Fireworks always creates a vector mask, even if both objects are bitmaps. 
2. Position the selection so that it overlaps the object or group to be masked. 


The selection can be either in front of or behind the objects to be masked. 


3. Select Edit > Cut to cut the objects you want to use as the mask. 
4. Select the object or group you want to mask. 


If you are masking multiple objects, they must be grouped. 


5. Do one of the following: 
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e Select Edit > Paste As Mask. 
e Select Modify > Mask > Paste As Mask. 


A mask applied to an image with a black canvas 


Mask objects by using the Paste Inside command 

.The created mask is either a vector mask or a bitmap mask, depending on the type of mask object you use. The Paste Inside command creates a 
mask by filling a closed path or bitmap object with other objects: vector graphics, text, or bitmap images. The path itself is sometimes referred to 
as a clipping path, and the items it contains are called contents or paste insides. Contents extending beyond the clipping path are hidden. 


1. Select the object or objects to use as the paste inside contents. 
2. Position the object or objects so that they overlap the object into which you want to paste the contents. 


Note: Stacking order is not important, as long as the objects you want to use as the paste inside contents remain selected. These objects 
can be above or below the mask object in the Layers panel. 


3. Select Edit > Cut to move the objects to the Clipboard. 


4. Select the object into which you want to paste the contents. This object will be used as the mask (the clipping path). 


5. Select Edit > Paste Inside. 


The objects you pasted appear to be inside or clipped by the mask object. 


Use text as a mask 
Text masks are a type of vector mask that you apply just as you apply masks that use existing objects. The text is the mask object. The usual way 
to apply a text mask is to use its path outline, but you can apply a text mask by using its grayscale appearance as well. 


133 


A text mask applied using its path outline 


To thet 
Use auto vector mask o the top 


Auto vector masks apply predefined patterns as vector masks to bitmap and vector objects. You can later edit the appearance and other 
properties of the auto vector masks. 


1. Select the bitmap or vector objects. 
2. Select Commands > Creative > Auto Vector Mask. 


3. Select the mask type and click Apply. 


z To thet 
Mask an object ne 


Mask objects using the Layers panel 
The quickest way to add an empty, transparent bitmap mask is through the Layers panel. The Layers panel adds a white mask to an object, which 
you can customize by drawing on it with the bitmap tools. 


1. Select the object you want to mask. 
2. At the bottom of the Layers panel, click the Add Mask button. 
Fireworks applies an empty mask to the selected object. The Layers panel displays a mask thumbnail representing the empty mask. 
. (Optional) If the masked object is a bitmap, use one of the marquee or lasso tools to create a pixel selection. 
. From the Tools panel, select a bitmap painting tool. 


. Set tool options in the Property inspector. 
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. With the mask still selected, draw on the empty mask. In the areas where you draw, the underlying masked object is hidden. 


Pe 


Image with mask applied 


fi ` B Bitmap 


The mask as it appears in the Layers panel 


Mask objects by using the Reveal and Hide commands 
The Modify > Mask submenu has several options for applying empty bitmap masks to objects: 
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Reveal All Applies an empty, transparent mask to an object, revealing the entire object. To achieve the same effect, click the Add Mask button in 
the Layers panel. 


Hide All Applies an empty, opaque mask to an object, which hides the entire object. 
Reveal Selection Can be used only with pixel selections. Reveal Selection applies a transparent pixel mask using the current pixel selection. The 
other pixels in the bitmap object are hidden. To achieve the same effect, make a pixel selection, then click the Add Mask button. 
Hide Selection Can be used only with pixel selections. Hide Selection applies an opaque pixel mask using the current pixel selection. The other 
pixels in the bitmap object are shown. To achieve the same effect, make a pixel selection, and then Alt-click (Windows) or Option-click (Mac OS) 
the Add Mask button. 
Use Reveal All and Hide All to create a mask 

1. Select the object you want to mask. 

2. To show the object, select Modify > Mask > Reveal All. To hide it, select Modify > Mask > Hide All. 

3. Select a bitmap painting tool from the Tools panel. 

4. Set tool options in the Property inspector. 


If you've applied a Hide All mask, you must select a color other than black. 


5. Draw on the empty mask. In the areas where you draw, the underlying masked object is either hidden or shown, depending on the type of 
mask you applied. 


Use Reveal Selection and Hide Selection to create a mask 
1. Select the Magic Wand or any marquee or lasso tool from the Tools panel. 


2. Select pixels in a bitmap. 


Original 


3. To show the area defined by the pixel selection, select Modify > Mask > Reveal Selection. To hide the area, select Modify > Mask > Hide 
Selection. 


The results of Reveal Selection and Hide Selection 


A bitmap mask is applied using the pixel selection. You can further edit the mask to reveal or hide the remaining pixels of the masked object 
using the bitmap tools in the Tools panel. 
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Importing and exporting Photoshop layer masks ae 


In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you import images that employ layer masks while 
retaining the ability to edit them. Layer masks are imported as bitmap masks. 


Fireworks masks can also be exported to Photoshop. They are converted into Photoshop layer masks. If the masked objects include text and you 
want to maintain text editability in Photoshop, you must select Maintain Editability Over Appearance when exporting. 


Note: If text is used as the mask object, it is converted to a bitmap and is no longer editable as text after it is imported into Photoshop. 
g To the to 
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If you group two or more objects to create a mask, the topmost object becomes the mask object. The type of the top object determines the type of 
mask (vector or bitmap). 


1. Shift-click two or more overlapping objects. 


> 


You can select objects from different layers. 


2. Select Modify > Mask > Group as Mask. 


. To the t 
Select, move, and edit masks a 


Select and move masks 


Select masks and masked objects using mask thumbnails 
In the Layers panel, thumbnails allow you to select and edit just the mask or the masked objects, without affecting the other objects. 


When you select the mask thumbnail, the mask icon appears beside it in the Layers panel. The Property inspector displays the properties of the 
mask, where you can edit them. 


e To select a mask, click the mask thumbnail in the Layers panel. 


e To select a masked object, click the masked object thumbnail in the Layers panel. 


Select masks and masked objects using the Subselection tool 
Use the Subselection tool to select individual masks and masked objects on the canvas without selecting the other components of the mask. The 
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Property inspector shows the properties for the selected object. 


“+ Click the object on the canvas with the Subselection tool. 


Move masks and masked objects 
You can reposition masks and masked objects. They can be moved together or independently. 


Move a mask and its masked objects together F : 
1. Using the Pointer tool, select the mask on the canvas. 


2. Drag the mask to a new location, but don't drag the move handle unless you want to move the masked object separately from the mask. 


Move masks and masked objects independently by unlinking 1. the Layers panel. clickthelinkiconon the mask 


This unlinks masks from masked objects so that they can be moved independently. 
2. Select the thumbnail of a mask or a masked object. 
3. Drag the object or objects on the canvas with the Pointer tool. 
Note: If more than one masked object are selected, all masked objects move together. 
4. To relink the masked objects to the mask, click between the mask thumbnails in the Layers panel. 


Move a mask independently by using its move handle ; : 
P yey 9 1. Using the Pointer tool, select the mask on the canvas. 


2. Select the Subselection tool and drag the mask's move handle to a new location. 


M ked objects ind dently of th kb ing th handl 
rAd ree ptt AE aE ee OY HSIN g S MONE ene 1. Using the Pointer tool, select the mask on the 


canvas. 


2. Drag the move handle to a new location. 


The objects move without affecting the position of the mask. 
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Note: If there is more than one masked object, all masked objects move together. 


Move masked objects independently of each other Click the object with the Subselection tool to select it, and then drag the 
object. 


This is the only way to select and move an individual masked object without moving other masked objects. 


Edit masks 

By modifying a mask's position, shape, and color, you can change the visibility of masked objects. You can also change a mask's type and the 
way it is applied. In addition, masks can be replaced, disabled, or deleted. The results of editing a mask are immediately visible on the thumbnail in 
the Layers panel, even if the mask object itself is not visible on the canvas. 


Masked objects can also be modified. You can rearrange masked objects without moving the mask. You can also add additional masked objects 
to an existing mask group. 


Modify a selected mask’s shape 
& Do one of the following: 


e Draw ona bitmap mask with any of the bitmap drawing tools. 


e Move the points of a vector mask object with the Subselection tool. 


Modify a selected mask’s color 
e For grayscale bitmap masks, use the bitmap tools to draw on the mask using various grayscale color values. 
e For grayscale vector masks, change the color of the mask object. 


Note: Use lighter colors to display the masked objects and darker colors to hide the masked objects. 


Add more mask objects to a mask 
1. Select Edit > Cut to cut the selected object or objects you want to add. 
2. Select the thumbnail of the masked object in the Layers panel. 
3. Select Edit > Paste As Mask. 
4 


. Select Add when asked whether to replace the existing mask or add to it. 


Modify a mask using the transformation tools 
1. Using the Pointer tool, select the mask on the canvas. 
2. Use a transformation tool or a command from the Modify > Transform submenu to apply a transformation to the mask. 


You can apply a transformation to the mask object alone by first unlinking the mask from the mask objects in the Layers panel and then 
performing the transformation. 


Add masked objects to a masked selection 
1. Select Edit > Cut to cut the selected object or objects you want to add. 
2. Select the thumbnail of the masked object in the Layers panel. 
3. Select Edit > Paste Inside. 


Note: Using the Paste Inside command on an existing mask won't show the mask object's stroke and fill unless the original mask was 
applied using its stroke and fill. 


Replace a mask 
1. Select Edit > Cut to cut the selected object or objects you want to use as the mask. 
2. Select the thumbnail of the masked object in the Layers panel and select Edit > Paste as Mask. 


3. Click Replace when asked whether to replace the existing mask or add to it. 


Disable or enable a selected mask 
Disabling a mask temporarily hides it. 


& Do one of the following: 
e From the Layers panel Options menu, select Disable Mask or Enable Mask. 


e Select Modify > Mask > Disable Mask or Modify > Mask > Enable Mask. 
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A red X appears on the mask thumbnail when it is disabled. Clicking the X enables the mask. 


Delete a selected mask 
Deleting a mask permanently removes it. 


1. Do one of the following: 
e From the Layers panel Options menu, select Delete Mask. 
e Select Modify > Mask > Delete Mask. 
e Drag the mask thumbnail to the trash can icon in the Layers panel. 
2. Choose whether to apply or discard the effect of the mask on the masked objects before deleting the mask: 


Apply Keeps the changes you have made to the object, but the mask is no longer editable. If the object being masked is a vector object, 
the mask and vector object are converted into a single bitmap image. 


Discard Eliminates the changes you have made and restores the object to its original form. 


Cancel Stops the delete operation and leaves the mask intact. 


Change the way masks are applied To the top 


When a mask is selected, the Property inspector lets you change the way the mask is applied. If the Property inspector is minimized, click the 
expander arrow to see all properties. 


Vector masks are applied using their path outline by default. Showing the mask's fill and stroke produces the same result as using Paste Inside to 
create masks. 


A vector mask applied using its path outline with Show Fill and Stroke enabled 


By applying a bitmap mask using its alpha channel, you can create a mask that looks similar to a vector mask applied using its path outline. The 
transparency of the mask object affects the visibility of the object being masked. 


A bitmap mask applied using its alpha channel 


Both vector and bitmap masks can be applied using their grayscale appearance. The lightness of mask's pixels determines how much of the 
masked object is displayed. Light pixels display the masked object, while darker pixels knock out the image and show the background. This 
technique creates interesting effects if the mask object contains a pattern or gradient fill. 
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A vector mask with a pattern fill applied using its grayscale appearance 


You can convert vector masks into bitmap masks, but you cannot convert bitmap masks into vector masks. 


Apply a vector mask using its path outline 
“* Select Path Outline in the Property inspector when a vector mask is selected. 


Show a vector mask's fill and stroke 
& Select Show Fill And Stroke in the Property inspector when a vector mask that has been applied using its path outline is selected. 


Apply a bitmap mask using its alpha channel 
“* Select Alpha Channel in the Property inspector when a bitmap mask is selected. 


Apply a vector or bitmap mask using its grayscale appearance 
& Select Grayscale Appearance in the Property inspector when a mask is selected. 


Convert a vector mask to a bitmap mask 
1. In the Layers panel, select the thumbnail of the mask object. 


2. Select Modify > Flatten Selection. 


(E) ev-ne -sa | 


Legal Notices | Online Privacy Policy 
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Styles, symbols, and URLs 


Styles 


Apply a style 

Create and delete styles 

Edit or redefine styles 

Saving and importing styles 

Change style icon size 

Copy attributes from one object to another without applying a style 
Break the link to a style 

Remove style overrides from objects 

Select unused styles in the current document 

Duplicate a style 


You can save and reapply a set of predefined fill, stroke, filter, and text attributes by creating a style. When you apply a style to an object, that 
object takes on the characteristics of the styles. 


Note: Bitmap objects receive only the filter attributes of a style. 
For a video tutorial on using styles and symbols in Fireworks, see www.adobe.com/go/Irvid4033_ fw. 


Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks DVD and the Adobe website have many more 
predefined styles that you can import into Fireworks. You can also export styles and share them with other Fireworks users, or import styles from 
other Fireworks documents. 


To the top 


Apply a style 
Use the Styles panel (in the Assets panel group) to create, store, and apply the full range of styles to objects, text, groups, and autoshapes. 
Q For quick access to the subset of styles found in a document, use the current styles menu in the Property inspector. 

1. Select the objects on the canvas you want to apply a style to. 

2. Select Window > Styles to display the Styles panel. 


3. Choose either Current Document to access currently used styles or select a preset style from the pop-up menu to access preset Fireworks 
styles. 
Note: Ifyou have no styles in a document, the styles panel remains blank until you select any of the preset styles. 


4. Click a style in the panel. 


Create and delete styles To the top 


You can create a style based on the attributes of a selected object, group, text, or autoshape. The following attributes can be saved in a style: 
e Fill type and color, including patterns, textures, and vector gradient attributes such as angle, position, and opacity 
e Stroke type and color 
e Filters 


e Text attributes such as font, point size, style (bold, italic, or underline), alignment, anti-aliasing, auto-kerning, horizontal scale, tracking, and 
leading 


If you delete a custom style, you cannot recover it; however, any object currently using the style retains its attributes. 


Create a style 
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1. Create or select a vector object, text, group, or autoshape with the stroke, fill, filter, or text attributes you want. 
2. Click the New Style button & at the bottom of the Styles panel or the Property inspector. 
3. Select the attributes you want to be part of the style. 

Note: To save other text attributes, use the Text Other option. 


4. Name the style and click OK. 


Rename a style 
1. Select a style in the Styles panel. 
2. Select Rename Style from the Styles panel options menu. 


3. Type a new name for the style and click OK. 


Base a new style on an existing style 
1. Apply the existing style to a selected object. 
2. Edit the attributes of the object. 


3. Save the attributes by creating a style. 


Delete a style 
1. Select a style in the Styles panel. 
Shift-click to select multiple styles; Control-click (Windows) or Command-click (Mac OS) to select multiple noncontiguous styles. 
2. Click the Delete Style button ®. 
To get your object back to the previous state, do one of the following: 
e Undo the style that you applied. 
e Edit the attributes manually and set them to the way they were before you applied the style. 


You can, if required, create a default style that sets an object's properties to the Fireworks defaults. Create an object, select it, and save itas a 
new style ensuring that you do not select any of the options in the New Style properties dialog. This "default" or "blank" style resets any of the 
attributes from another style, but does not revert the object to a previous appearance. 


Edit or redefine styles To the top 


Edit styles to enable or disable specific properties such as fill or stroke. Redefine styles to modify any filters they include. 


When you edit or redefine a style, all objects you’ve applied it to update automatically. You can, however, break the link between selected objects 
and styles. (See Break the link to a style.) 


Edit a style 
1. Choose Select > Deselect to deselect any objects on the canvas. 
2. Double-click a style in the Styles panel. 
3. In the Edit Style dialog box, select or deselect attributes. 
4 


. Click OK to apply the changes to the style. 


Redefine a style 
1. On the canvas, select an object that uses the style. 
2. In the Property inspector, modify the applied filters, and then click the Redefine Style button. 


Note: When you redefine a style from a group, only the effects are redefined. All the path attributes are ignored. 
Q To quickly replace one style with another within the Current Document styles, Alt-drag (Windows) or Option-drag (Mac OS) one to another in 
the Styles panel. 


Saving and importing styles ae 


To save time and maintain consistency, you can share styles by exporting them for use by others. 
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Save the style library 
You can save the styles you have created or edited as a style library. The names of styles are arranged in the alphabetical order. Styles can also 
be applied to groups, autoshapes, and symbols. 


1. Select Save Style Library from the Styles panel options menu. 
2. Enter a name and location for the style library. 


3. Click Save. 


Import styles 
1. Select Import Style Library from the Styles panel options menu. 


2. Select a style library (*.stl) to import. The style library is available across multiple documents and multiple sessions of Fireworks. 


Load styles to the current document 
1. Select Load Style from the Styles panel options menu. 


2. Select a style library (*.stl) to load to the current document. The styles loaded are available to the current document. 
; ` To thet 
Change style icon size E 


& To change the size of the style preview icons, select Large Icons from the Styles panel options menu to switch between large and small preview 
sizes. 


Copy attributes from one object to another without applying a style E 
1. Select the object whose attributes you want to copy. 
2. Select Edit > Copy. 
3. Deselect the original object, and then select the objects to which you want to apply the new attributes. 
4. Select Edit > Paste Attributes. 
To the top 


Break the link to a style 


You can break the link between an object and the style applied to it. The object retains the same attributes, but no longer changes if the style is 
changed. 


1. Select the object that has the style applied to it. 
2. In the lower-right area of the Property inspector, click the Break Link To Style button. 


Q If the Property inspector is minimized, choose Break Link To Style from the Styles panel menu. 


A : To thet 
Remove style overrides from objects oe 

1. Select the objects which you had changed after applying a style. 

2. Select Clear Overrides from the Styles panel Options menu. 

‘ To the to 
Select unused styles in the current document P 
“* From the Styles panel options menu, choose Select Unused Styles. 
To the top 


Duplicate a style 
1. Select a style in the Styles panel. 
2. Select Duplicate Style from the Styles panel options menu. 


More Help topics 


O 
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Symbols 


Create a symbol 

Place an instance of a symbol 

Edit a symbol and all of its instances 
Edit specific symbol instances 
Create and use component symbols 
Import and export symbols 

Create nested symbols 

9-slice scaling nested symbols 


Re-usable graphic elements in Fireworks are referred to as symbols. Fireworks has three types of symbols: graphic, animation, and button. When 
you edit the original symbol object, the copied instances automatically change to reflect the edited symbol (unless you break the link between the 
two). 


Symbols are also helpful for creating buttons and animating objects across multiple states. 
For more information on symbols, see Understanding styles and symbols in the dev center. 


For a video tutorial on using styles and symbols in Fireworks, see www.adobe.com/go/Irvid4033_ fw. 


To thet 
Create a symbol o the top 


You can create a symbol from any object, text block, or group, and then store it in the Common Library tab of the Assets panel. From there, you 
can edit the symbol and place it in your documents. 


Create a symbol from a selected object 
1. Select the object, and select Modify > Symbol > Convert to Symbol. 
2. Type aname for the symbol in the Name box. 
3. Select a symbol type. 
4. To scale the symbol without distorting its geometry, select Enable 9-slice Scaling Guides. (See 9-slice scaling.) 
5. To store the symbol so that it can be used in multiple documents, select the Save To Common Library option. 
6. Click OK to save the symbol. 


The selected object becomes an instance of the symbol, and the Property inspector displays symbol options. 


Create a symbol from scratch 
1. Do one of the following: 
e Select Edit > Insert > New Symbol. 
e Select New Symbol from the Document Library panel Options menu. 
2. Select a symbol type. 
3. To use 9-slice scaling guides to scale the symbol, select the Enable 9-slice scaling guides option, and then click OK. 


4. Create the symbol using the tools in the Tools panel. 


. To thet 
Place an instance of a symbol ais 


“* Drag a symbol from the Document Library panel to the current document. 
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An instance of a symbol on the canvas 


Edit a symbol and all of its instances bia 


When you edit a symbol, all associated instances update automatically to reflect most modifications. Some properties are independent, however. 
For more information, see Edit specific symbol instances. 


When you break apart the symbol the graphics are grouped by default. Ungroup the graphics (buttons, scrollbar, or others) to modify them. You 
can later re-group the graphics and convert them to a symbol. If you do not group the graphics before conversion, individual graphics in the symbol 
become editable. 


Edit a symbol 
1. To enter symbol-editing mode, do one of the following: 
e On the canvas, double-click a symbol instance. 
e Select an instance, and choose Modify > Symbol > Edit Symbol. 
e Inthe Document Library panel, double-click a symbol icon. 
e (Animation symbols only) Click the Edit button in the Animate dialog box. 
2. Change the symbol as needed. 


Note: If the selected symbol is not enabled for 9-slice scaling, you can edit the symbol within the context itself. You can choose Modify > 
Symbol > Edit In Place. 
Q Use 9-slice scaling guides to avoid distortion when resizing the symbol. (See 9-slice scaling.) 


Switch from symbol editing to page editing 


When you edit a symbol, the document panel enters symbol-editing mode. This mode dims other objects on the canvas, letting you quickly modify 
symbols in the context of the overall page. (One exception is symbols that use 9-slice scaling, which appear alone.) 


To switch from symbol editing to page editing, do either of the following: 
e Inthe canvas, double-click an empty area. 


e In the tray at the top of the document panel, click the page icon or the back arrow. (If the symbol is nested, the tray also provides access to 
the containing symbol.) 


Rename a symbol 
1. In the Document Library panel, double-click the symbol name. 


2. In the Convert to Symbol dialog box, change the name, and click OK. 


Duplicate a symbol 
1. In the Document Library panel, select the symbol. 
2. Select Duplicate from the Document Library panel options menu. 


3. Change the name and type of the duplicate if desired, and click OK. 


Change symbol type 
1. Double-click the symbol name in the Library. 


2. Select a different Type option. 


Select all unused symbols in the Document Library panel 
& Choose Select Unused Items from the Document Library panel Options menu. 
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Delete a symbol and all of its instances 
& In the Document Library panel, drag the symbol to the trash icon. 


Swap a symbol 
1. On the canvas, right-click a symbol, and select Swap Symbol. 


2. In the Swap Symbol dialog box, select another symbol from the Document Library, and click OK. 


Edit specific symbol instances bai 


When you double-click an instance to edit it, you're actually editing the symbol itself. To edit only the current instance, you must break the link 
between the instance and the symbol. This permanently breaks the relationship between the two. Any future edits you make to the symbol won't 
be reflected in the former instance. 


Button symbols have several features that let you retain symbol-instance relationships while assigning unique button text and URLs to each 
instance. 


To adjust JavaScript behaviors for component symbols, edit values in the Symbol Properties panel. To add customizable properties to that panel, 
you must edit the JavaScript file associated with the symbol. 


Note: Height and width attributes cannot be set for a component using JavaScript. 


Break symbol links 
1. Select the instance. 
2. Select Modify > Symbol > Break Apart. 


The selected instance becomes a group. The symbol in the Document Library panel is no longer associated with that group. After separation 
from the symbol, a former button instance loses its button symbol characteristics and a former animation instance loses its animation symbol 
characteristics. 


Edit an instance without breaking the symbol link 
1. Select the instance. 
2. Modify instance properties in the Property inspector. 
These instance properties can be modified without affecting the symbol and other instances: 

e Blending mode 
e Opacity 
e Filters 
e Width and height 


e x and y coordinates 


To the to 
Create and use component symbols p 


Component symbols are graphic symbols that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. They are also 
referred to as Rich Symbols. Modifying an instance with the Properties panel affects the symbol and all other instances. However, modifying 
parameters in the Symbol Properties panel (Window > Symbol Properties) affects only the selected instance. 


Fireworks includes a library of predesigned component symbols; you can customize these symbols to match the appearance of a particular 
website or user interface. 


Add a component symbol to a document 
1. Select Common Library from the Window menu. 


2. To use a symbol, drag and drop the symbol from the Common Library panel to the Fireworks canvas. 


Adjust component symbol properties 
1. On the canvas, select the symbol. 
2. In the Symbol Properties panel (Window > Symbol Properties), adjust parameters such as state, label, and color. 


Q To create interactive buttons for HTML-based web and software prototypes, see Interactive slices. 
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Create a component symbol 
For more information, see the article Using rich symbols in Fireworks, or the video tutorial at www.wonderhowto.com. 


L 
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Create an object with attributes that you want to customize. 


This symbol could have the bullet color and the bullet number as customizable options. 


. When creating the object, customize the names of the features that you want to be editable by typing a name into the Layers panel. Ensure 


that you use the name Label for the text layer, maintaining the upper case for the first L. This name is used in the JavaScript file. 


Note: To avoid JavaScript errors, do not include any spaces in feature names. For example, use “number_label,” but not “number label”. 


. Select the object, and then select Modify > Symbol > Convert to Symbol. 


Type a name for the symbol in the Name box. 


. Select Graphic as the symbol type, select Save to Common Library, and then click OK. 


. At the prompt, save new symbol to the default Custom Symbols folder, or create another folder at the same level as the default folder. 


Note: Component symbols must be saved in a folder within the Common Library. 


After being saved, the symbol is removed from the canvas and appears in the Common Library. 


. From the Commands menu, select Create Symbol Script. 


. Click the browse button in the upper right corner of the panel and browse to the symbol PNG file. The default location is as follows: 


e For Microsoft® Windows® XP: <user settings>\Application Data\Adobe\Fireworks CS5\Common Library\Custom Symbols 
e For Windows Vista®: \Users\<username>\AppData\Roaming\Adobe\Fireworks CS5\Common Library\Custom Symbols 


e For Mac® OS: <user name>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols 


. Click the plus button to add an element name. 
. Inthe Element Name box, select the name of the element to customize from the menu. 


. In the Attribute box, select the name of the attribute you want to customize. For example, to customize the text in the label, select textChars. 


Note: For more information about these attribute options see Extending Fireworks. 


. In the Property Name field, type the name of the customizable property, for example, “Label” or “Number.” This property name appears in 


the Symbol Properties panel. 


. In the Value field, type a default value for the property used when an instance of the symbol is first placed into a document. 
. Add additional elements as needed. 
. Click Save to save the selected options and create a JavaScript file. 


. Select Reload from the Common Library panel Options menu to reload the new symbol. 


After creating the JavaScript file, you can create an instance by dragging the symbol to the canvas. Then you can change its attributes in the 
Symbol Properties panel. 


Note: Ifyou remove or rename an object that is referenced by the script, The Symbol Properties panel reports errors. 


Save an existing symbol as a component symbol 


L 
2: 
3. 


Select a symbol in the Document Library panel. 
Select Save to Common Library from the Document Library panel Options menu. 


Create a JavaScript file to control the symbol properties. 


Create editable symbol parameters using JavaScript 
When you save a component symbol, Fireworks saves a PNG file in the following default folders: 


e (Windows XP) <user settings>\Application Data\Adobe\Fireworks CS5\Common Library\Custom Symbols 
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e (Windows Vista) \Users\<user name>\AppData\Roaming\Adobe\Fireworks CS5\Common Library\Custom Symbols 
e (Mac OS) <user name>/Application Support/Adobe/Fireworks CS5/Common Library/Custom Symbols 


To create a component symbol, a JavaScript file must be created and saved with a .JSF extension in the same location and with the same name 
as the symbol. For example, mybutton.graphic.png would have a JavaScript file named mybutton.jsf. 


The Create Symbol Script panel allows non-programmers to assign some simple symbol attributes and create the JavaScript file automatically. To 
open this panel, select Create Symbol Script from the Commands menu. 


Create the JavaScript file 
Two functions in the JavaScript file must be defined to add editable parameters to the symbol: 


e function setDefaultValues() — defines the parameters that can be edited and the default values of these parameters. 
e function applyCurrentValues() — applies the values entered through the Symbol Properties panel to the graphic symbol. 


The following is a sample .JSF file for creating a custom symbol: 


function setDefaultValues() 

{ 
var currValues = new Array(); 

//to build symbol properties 
currValues.push({name:"Selected", value:"true", type:"Boolean"}); 
Widget.elem.customData["currentValues"] = currValues; 

} 

function applyCurrentValues() 

{ 
var currValues = Widget.elem.customData["currentValues"]; 

// Get symbol object name 
var Check = Widget.GetObjectByName("Check"); 
Check.visible = currValues[0@].value; 


} 

switch (Widget .opCode) 

{ 
case 1: setDefaultValues(); break; 
case 2: applyCurrentValues(); break; 
default: break; 

} 


This sample JavaScript shows a component symbol that can change colors: 
function setDefaultValues() 
{ 
var currValues = new Array(); 
//Name is the Parameter name that will be displayed in the Symbol Properties Panel 
//Value is the default Value that is displayed when Component symbol loads first time. In this 
case, Blue will be the default color when the Component symbol is used. 
//Color is the Type of Parameter that is displayed. Color will invoke the Color Popup box 
in the Symbol Properties Panel. 
currValues.push({name:"BG Color", value:"#003366", type:"Color"}); 
Widget.elem.customData["currentValues"] = currValues; 
h 
function applyCurrentValues() 
{ 
var currValues = Widget.elem.customData["currentValues"]; 
//color_bg is the Layer name in the PNG that will change colors 
var color_bg = Widget.GetObjectByName("color_bg"); 
color_bg.pathAttributes.fillColor = currValues[0].value; 


i} 

switch (Widget .opCode) 

{ 
case 1: setDefaultValues(); break; 
case 2: applyCurrentValues(); break; 
default: break; 

} 


To better understand how the .JSF file can be used to customize symbol properties, explore the sample components included with the 
software. 
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To thet 
Import and export symbols we 


The Document Library panel stores symbols that you create or import in the current document. The Document Library panel is specific to the 
current document; to use symbols from one library in another document, import, export, copy, or drag them. 


Import one or more prepared symbols from a Fireworks symbol library 
You can import prepared animation symbols, graphic symbols, and button symbols, as well as navigation bars and multi-symbol themes. 


1. Open a Fireworks document. 
2. Select a folder in the Common Library panel. 


You can also import symbols from previously exported library PNG files located on your hard drive, on a CD, or on a network. 


Import symbols from another file into the current document 
1. Select Import Symbols from the Document Library panel Options menu. 
2. Navigate to the PNG folder containing the file, select the file, and click Open. 
3. Select the symbols to import and click Import. 


The imported symbols appear in the Document Library panel. 


Import a symbol by dragging and dropping or copying and pasting 
** Do one of the following: 


e Drag a symbol instance from the document containing the symbol into the destination document. 
e Copy a symbol instance in the document containing the symbol, then paste it into the destination document. 


The symbol is imported into the Document Library panel of the destination document and retains a relationship to the symbol in the original 
document. 


Export symbols 
1. Select Export Symbols from the Document Library panel Options menu. 
2. Select the symbols to export, and click Export. 
3. Navigate to a folder, type a name for the symbol file, and click Save. 


Fireworks saves the symbols in a single PNG file. 


Update exported symbols and instances in multiple documents 
Imported symbols maintain their link to their original symbol document. You can edit the original symbol document and then update the target 
documents to reflect the edits. 


1. In the original document, double-click an instance, or select an instance and select Modify > Symbol > Edit Symbol. 
2. Modify the symbol. 

3. Save the file. 

4. In the document into which the symbol was imported, select the symbol in the Document Library panel. 
5. Select Update from the Document Library panel Options menu. 


Note: To update all imported symbols, select all the symbols in the Document Library panel and select Update. 


To the to 
Create nested symbols P 


Symbols created within symbols are referred to as nested symbols. 
1. Create an object on a page using the vector tool. For example, create a rectangle using the vector tool. 
2. Right-click the rectangle, and select Convert To Symbol. 
3. In the Convert To Symbol dialog box, do the following: 
a. Enter a name for the symbol. For example, call it Symbol A. 
b. If you are planning to apply 9-slice scaling to the symbol, select Enable 9-slice Scaling Guides. 


4. Double-click the “+” icon in the center of the symbol. 
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5. Repeat steps one through four to create another symbol, Symbol B. Because Symbol B is created within Symbol A, Symbol B is a nested 
symbol of Symbol A. 
Note: You can create more than one nested symbol. 


. z To the to 
9-slice scaling nested symbols j 


You can create symbols within a symbol. Such symbols, called nested symbols, can be scaled individually. 
Ensure the following before you try to 9-slice scale a symbol. 
e Select Enable 9-slice scaling guides when creating the symbol. 


e Ensure that you are in the Edit mode of the symbol that you want to scale. Double click the “+” icon on the inner symbol to move to its edit 
mode. 


When transforming nested symbols based on the 9-Slice scale setting, you can scale nested symbols individually. For example, consider a 
symbol that is nested three levels — Symbol A inside Symbol B, which is inside Symbol C. You can scale Symbol A (inner most) and symbol 
B (Intermediate) as per their respective 9-Slice guides.Ensure that you are in the Edit mode of the inner symbol to use 9-slice scaling. In the 
edit- in-place mode, 9-slice scaling for nested symbols can be viewed only through the Library panel. Double-clicking a symbol on the canvas 
does not display the 9-Slice scale guides. 


Enable 9-slice scaling for an existing symbol 
1. Move to the view where you created the symbol. 


2. Select the Symbol in the Document Library panel, and click Symbol Properties. 
Note: Ifthe Document Library Panel is not visible, select Window > Document Library to display the panel. 


3. In the Convert To Symbol dialog box, select Enable 9-slice scaling guides. 


More Help topics 
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URLs 


About absolute and relative URLs 

Link to pages in a Fireworks document 
Assign a URL to a web object 

Create a URL library 

Edit URLs 

Import and export URLs 


Assigning a URL to a web object creates a link to a file such as a web page. You can assign URLs to slices, hotspots, and buttons. To store, edit, 
and organize URLs for reuse, create a URL library in the URL panel. 


For example, if your website contains several navigation buttons to return to your home page, add the URL for your home page to the URL panel. 
Then assign this URL to each navigation button by selecting it in the URL library. Use the Find and Replace feature to change a URL across 
multiple documents (see The find and replace feature). 


URL libraries are available for all Fireworks documents and are saved between sessions. 


About absolute and relative URLs eee 


You can enter an absolute or relative URL in the URL panel. 
e To link to a web page that is beyond your own website, use an absolute URL. 
e To link to a web page within your website, use either one. 


Absolute URLs are complete, including the server protocol, which is usually http:// for web pages. For example, 
http://www.adobe.com/support/fireworks is the absolute URL for the Fireworks Support web page. Absolute URLs remain accurate regardless 
of the location of the source document, but they do not link correctly if the target document is moved. 


Relative URLs are relative to the folder containing the source document. Relative URLs are usually the simplest to use for links to files in the 
same folder as the current document. These examples show the navigation syntax of relative URLs: 


e file.htm links to a file located in the same folder as the source document. 
e ../../file.htm links to a file located in the folder two levels above the folder containing the source document. Each ../ represents one level. 


e htmidocs/file.htm links to a file located in a folder named htmldocs, which is in the folder containing the source document. 


r A à To thet 
Link to pages in a Fireworks document aren 


You can create links between multiple pages in a Fireworks document by using the URLs for each page. In the Property inspector and URL panel, 
the Link pop-up menu contains a list of URLs for each page in a document. Select one of these page URLs to link to the page. 


Give default page URLs an extension other than .htm 
1. With a document open, select File > Export. 
2. Select HTML And Images. 
3. Click the Options button. 
4. On the General tab, select a filename extension from the Extension pop-up menu and click OK. 
5 


. Click Cancel in the Export dialog box. 


Assign a URL to a web object en 


1. In the URL panel (in the Assets panel group), enter the URL in the Current URL text box. 
2. Click the Add Current URL To The Library button (+) to add the URL to the URL library. 
3. Select a web object. 

4. Select the URL from the URL Preview pane. 
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Create a URL library To the top 


Libraries keep related URLs together, making them easier to access. You can save URLs in the default URL library, URLs.htm, or in new URL 
libraries that you create. You can also import URLs from an existing HTML and then create a library of them. 


URLs.htm and any new libraries you create are stored in the Adobe/Fireworks CS5/URL Libraries folder in your user-specific Application Data 
folder (Windows) or Application Support folder (Mac OS). 


For information on locating these folders, see Customize using configuration files. 


Create a URL library 
1. Select New URL Library from the URL panel Options menu. 


2. Enter the library name in the box and click OK. 


Add a new URL to a URL library 
1. Select a library from the Library pop-up menu. 
2. Enter a URL in the Link box. 
3. Click the Plus (+) button. 


Simultaneously add a URL to the library and assign it to a web object 
1. Select the object. 
2. Do one of the following to enter the URL: 
e Select Add URL from the URL panel Options menu, enter an absolute or relative URL, and click OK. 
e Enter a URL in the Link box, and then click the Plus (+) button. 


The URL appears in the URL preview pane. 


Add used URLs to a URL library 
1. Select a library from the Library pop-up menu. 


2. Select Add Used URLs To Library from the URL panel Options menu. 


Delete a selected URL from the URL preview panel 
“* Click the Delete URL From Library button ® at the bottom of the URL panel. 


Delete all unused URLs from the library 


1. Select Clear Unused URLs from the URL panel Options menu. 


2. Click OK. 

r To the to 
Edit URLs : 
Edit a single occurrence of a URL, or make a change affect all occurrences. 

1. Select the URL from the URL Preview pane. 
2. Select Edit URL from the URL panel Options menu. 
3. Edit the URL. 
4. To update this link throughout the document, select Change All Occurrences In Document. 
To the top 


Import and export URLs 


You can export URLs, and then import them into any of your other Fireworks documents. You can also import all URLs in any existing HTML 
document. 


Export URLs 
1. Select Export URLs from the URL panel Options menu. 
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2. Enter a filename and click Save. 


An HTML file is created that contains the URLs you have exported. 


Import URLS 
1. Select Import URLs from the URL panel Options menu. 
2. Select an HTML file and click Open. 


All URLs in this file are imported. 
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Slices, rollovers, and hotspots 
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Creating and editing slices 


Create rectangular slices 

Create nonrectangular slices 

Create HTML text slices 

View and display slices and slice guides 
Edit slices 


Slices are the basic building blocks for creating interactivity in Adobe® Fireworks®. Slices are web objects that ultimately exist as HTML code. You 
can view, select, and rename them through the Web Layer in the Layers panel. 


Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file. Upon export, Fireworks creates an HTML file 
containing table code to reassemble the graphic in a browser. 


Slicing cuts a document into multiple pieces, which are exported as separate files. 


Slicing an image provides three major advantages: 


Optimizes images For fastest downloading. 
Adds interactivity So images can respond to mouse events. 
Eases updates For parts of web pages that frequently change (for example, photos and names on an employee-of-the-month page). 


à To thet 
Create rectangular slices ee 


Create rectangular slices by drawing with the Slice tool or by inserting a slice based on a selected object. Use slice guides (the lines extending 
from the slice object) to determine the boundaries of the separate image files that the document splits into when the document is exported. 


Creating rectangular slices| 


Draw a rectangular slice object 
1. Select the Slice tool z. 


2. Drag to draw the slice object. 
Note: To adjust the position of a slice as you drag to draw it, hold down the mouse button, press and hold down the spacebar, and then 
drag the slice to another location on the canvas. Release the Spacebar to continue drawing the slice. 


Create a rectangular slice based on a selected object 
1. Select Edit > Insert > Rectangular Slice. The slice is a rectangle whose area includes the outermost edges of the selected object. 


2. If more than one object is selected, select Single to create a single slice object that covers all selected objects, or select Multiple to create a 
slice object for each selected object. 


To the top 


Create nonrectangular slices 


Use the Polygon Slice tool to create nonrectangular slices. Nonrectangular slices are useful when you're trying to attach interactivity to a 
nonrectangular image. 


Creating non-rectangular slices] 
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Draw polygon slice objects 
1. Select the Polygon Slice tool 24 : 
2. Click to place the vector points of the polygon. This is necessary because the Polygon Slice tool draws straight line segments. 


3. When drawing a polygon slice object around objects with soft edges, include the entire object to avoid creating unwanted hard edges in the 
slice graphic. 

4. To stop using the Polygon Slice tool, select another tool from the Tools panel. You don't have to click the first point to close the polygon. 
Note: Polygon slices combine HTML tables with image maps, requiring more code than similar rectangular slices. Using many polygon 
slices can increase processing time in a web browser. 


Create a polygon slice from a vector object or path 
1. Select a vector path. 


2. Select Edit > Insert > Polygon Slice. 


Create HTML text slices To the top 


An HTML slice designates an area where ordinary HTML text appears in the browser. It then exports the HTML text that appears in the table cell 
defined by the slice. 


HTML slices are useful for quickly updating website text without creating new graphics. 


Note: Because font size and type can be set in the browser, HTML text slices can vary in appearance when viewed in different browsers and on 
different operating systems. 


1. Draw a slice object. 

2. With the slice object selected, select HTML from the Type pop-up menu in the Property inspector. 

3. Click Edit. 

4. Type text in the Edit HTML Slice window, and format the text by adding HTML text-formatting tags. 
Note: Alternatively, apply HTML text-formatting tags after exporting the HTML. 

5. Click OK to apply your changes and close the Edit HTML Slice window. 


The text and HTML tags you entered appear in your Fireworks PNG file as raw HTML code on the body of the slice. 


= a R P . To thet 
View and display slices and slice guides one 


You can control the visibility of slices and other web objects in your document by using the Layers panel and the Tools panel. When you turn slice 
visibility off for the whole document, slice guides are hidden too. 


View and select slices 
The Web Layer displays all the web objects in the document. 


1. Select Window > Layers. 
2. Expand the Web Layer by clicking the triangle. 


3. Click a slice name to select it. 
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Show and hide slices 
Hiding a slice renders the slice invisible in the Fireworks PNG file. Hidden slice objects can be exported in the HTML. 


e To hide an individual slice, click the eye icon ® next to the individual web object in the Layers panel. 
e To show a hidden slice, click in the Eye column to turn visibility back on. 


e To hide or show all hotspots, slices, and guides, click the appropriate Hide/Show Slices button AH in the Web tools section of the Tools 
panel, or click the eye icon next to the Web Layer in the Layers panel. 


e To hide or show slice guides in any document view, select View > Slice Guides. 


Change the color of slice objects and guides 
Assigning unique colors to individual slices and slice guides helps you to see and organize them. 


e To change the color of a selected slice object, in the Property inspector, select a new color from the color box. 


e To change the color of slice guides, choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). Then select a new Slice 
Guides color from the Guides and Grids category of the Preferences dialog box. 


Note: When you preview your document, deselected slices are visible as a white overlay. 


z 2 To the t 
Edit slices open 


Working with a slice layout is similar to using a table in a word-processing application. When you drag a slice guide to resize a slice, all adjacent 
rectangular slices are also resized. 


You can also use the Property inspector to resize and transform slices. 


Edit slices by moving slice guides 
Slice guides define the perimeter and position of slices. Slice guides that extend beyond slice objects define how the rest of the document is sliced 
upon export. You can change the shape of a rectangular slice object by dragging the slice guides that surround it. 


You can't resize nonrectangular slice objects by moving slice guides. 


Resizing a slice object by dragging its slice guides 


Note: Ifyou drag slice guides that surround a Fireworks button in the document window, Fireworks resizes the slice that defines the active area 
for that button. You cannot delete the active area for a Fireworks button by dragging the slice guides that surround it. 
If multiple slice objects are aligned along a single slice guide, you can drag that slice guide to resize all the slice objects simultaneously. 


Resizing multiple slice objects by dragging a single guide 


If you drag one guide along a given coordinate, all other guides on that coordinate move with it. 


Resize one or more slices 
1. Position the Pointer or Subselection tool over a slice guide. 


The pointer changes to the guide movement pointer ¢b. 
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2. Drag the slice guide to the desired location. 


The slices and all adjacent slices are resized. 


Reposition a slice guide to the far edge of the canvas 
& Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas. 


Move adjacent slice guides 
1. Shift-drag a slice guide across adjacent slices guides. 
2. Release the slice guide in the desired location. 
All slice guides that you dragged across are moved to this location. 


Q To cancel this operation and return all slice guides to their original positions, release the Shift key before you release the mouse button. 


Edit slices with tools 
Use the Pointer, Subselection, and Transform tools to reshape or resize a slice. 


Note: Only polygon slices can be skewed or distorted. 
Because the size of adjacent slice objects is not automatically adjusted, resizing and reshaping slices can create overlapping slices. When slices 
overlap, the topmost slice takes precedence if interactivity is involved. To avoid overlapping slices, use slice guides to edit slices. 


& To edit the shaped of a selected slice, do one of the following: 
e Select the Pointer or Subselection tool and drag the slice’s corner points to modify its shape. 


e Use a transformation tool to perform the transformation. Transforming a rectangular slice can change its shape, position, or dimensions, but 
the slice itself remains rectangular. 


e Use the Property inspector to change a slice object's position and size numerically. 


Remove a slice 
1. In the Layers panel, select the slice in the Web Layer. 
2. At the bottom of the panel, click the trash icon. 


When you drag a button symbol from the Common Library to the page, it automatically creates a slice that is visible on the canvas but does not 
appear in the web layer. 


If you select the slice on the canvas with the pointer tool and delete it, the entire button symbol is deleted. To retain the underlying graphic, select 
the slice/object on the canvas with the pointer tool, and then select Modify > Symbol > Break Apart. The slice disappears, and the button graphic 
from state #1 is retained. However, the graphics from states 2,3, and 4 are lost when you break apart a button symbol. 


More Help topics 


(G3) ev-ne-se | 


Legal Notices | Online Privacy Policy 


159 


Hotspots, image maps, and rollovers 


Create hotspots 

Prepare hotspots for export 
Create image maps 

Create rollovers with hotspots 
Use hotspots on top of slices 


Web designers can use hotspots to make small parts of a larger graphic interactive, linking areas of web graphics to a URL. You can create an 
image map in Fireworks by exporting HTML from a document that contains hotspots. 


Click on your 
download area: 


An image map with hotspots 


Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing requires more processing power because of the additional 
HTML code needed to download and reassemble sliced graphics. 


Note: Itis possible to create a sliced image map. Exporting a sliced image map typically generates many graphic files. For more information 
about slicing, see Create rectangular slices. 


Create hotspots To the top 


e Hotspots are ideal when you want areas of an image to link to other web pages, but you don't need those areas to highlight or produce 
rollover effects in response to mouse movement or actions. 


e Hotspots and image maps are also ideal when the graphic onto which you've placed your hotspots would be best exported as a single 
graphic file—in other words, the entire graphic would best be exported using the same file format and optimization settings. 


e Hotspots can be rectangles, circles, or polygons. Polygons are useful when working with intricate images. 


e You can select an object and insert the hotspot over it. 


Create a rectangular or circular hotspot 


1. Select the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel. 


Web 


(ele : 


v É Rectangle Hotspot tool (7) 


a & Circle Hotspot tool (3) 
1 A 
j @ Polygon Hotspot tool (3) 


2. Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows) or Option (Mac OS) to draw from a center 
point. 
Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the mouse button, press and hold down the 
spacebar, and then drag the hotspot to another location on the canvas. Release the Spacebar to continue drawing the hotspot. 


Create an odd-shaped hotspot 
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1. Select the Polygon Hotspot tool Ò, 


2. Click to place vector points, much as you would draw straight line segments with the Pen tool. Whether the path is open or closed, the fill 
defines the hotspot area. 


Create a hotspot by tracing one or more selected objects 
1. Select multiple objects and then select Edit > Insert > Hotspot. 
2. Click Single to create a single rectangular hotspot covering all objects or Multiple to create multiple hotspots (one for each object). 


The Web Layer displays the new hotspot or hotspots. 


Convert a selected hotspot to a rectangle, circle, or polygon hotspot 
“+ In the Property inspector, select Rectangle, Circle, or Polygon from the Hotspot Shape pop-up menu. 


Prepare hotspots for export To the top 


Assign hotspot properties such as URLs and alternate text in the Property inspector, in the same way you assign slice properties. 


. To the t 
Create image maps o the top 


After you've inserted hotspots above a graphic, export the graphic as an image map so it functions in a web browser. Exporting an image map 
generates the graphics and the HTML containing map information for hotspots and corresponding URL links. Fireworks produces only client-side 
image maps when exporting. 


Alternatively, copy your image map to the Clipboard and paste it into Dreamweaver or another HTML editor. 
For information on placing exported Fireworks content into Dreamweaver, see Working with Dreamweaver 
1. Optimize the graphic to prepare it for export. 
2. Select File > Export. 
3. If you are exporting your image, navigate to the folder where you want to place the HTML file, and name the file. 
If you have already built a local file structure for your website, you can save the graphic in the appropriate folder for the site from here. 
4. In the Save as Type pop-up menu, select HTML And Images. 
5. Select an option from the HTML pop-up menu: 


Export HTML File Generates the required HTML file and corresponding graphics files for importing into Dreamweaver or another HTML 
editor. 


Copy to Clipboard Copies all required HTML, including a table if the document is sliced, to the Clipboard for pasting into Dreamweaver or 
another HTML editor. 
Note: For Slices, select None only if the document contains no slices. 


6. (Export only) If necessary, select Put Images In Subfolder and browse to the appropriate folder. 
7. Click Save. 


8. When you export files, Fireworks can use HTML comments to label the beginning and end of code for image maps and other web features. 
By default, HTML comments are not included in the code. To include them, select Include HTML Comments on the General tab of the HTML 
Setup dialog box. 


n To the to 
Create rollovers with hotspots p 


Use the drag-and-drop rollover method to attach a disjoint rollover effect to a hotspot. The target area must be defined by a slice. Rollover effects 
are applied to hotspots the same way that they are to slices. 


Note: A hotspot can trigger only a disjoint rollover. It cannot be the target of a rollover coming from another hotspot or slice. 
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After you create a disjoint rollover with a hotspot, the connecting blue line remains visible only while the hotspot is selected. 


Use hotspots on top of slices ee 


If you have a large graphic and you want only a small portion of it to act as the trigger for an action, place a hotspot on top of a slice to trigger an 
action or behavior. 


You can also place a slice on top of the graphic, and then place a hotspot on top of the text. Rolling over just the text triggers the rollover effect, 
but the entire graphic beneath the slice swaps out when the rollover effect occurs. 


Note: Avoid creating hotspots that overlap more than one slice. 


1. Insert a slice on top of the image you want to swap out. 


2. Create a new state in the States panel, and insert an image that you will use as your swapped image. Be sure to place it beneath the slice 
you inserted in step 1. 


3. Drag a behavior line from the hotspot to the slice that contains the image you want to swap. 
4. Select the state holding the rollover image from the Swap Image From list, and click OK. 


More Help topics 
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Interactive slices 


Add simple interactivity to slices 
Add complex interactivity to slices 


Fireworks provides two ways to make slices interactive: 
e For simple interactivity, use the drag-and-drop rollover method. 


e For more complex interactivity, use the Behaviors panel. Behaviors in Fireworks are compatible with Adobe Dreamweaver® behaviors. When 
you export a Fireworks rollover to Dreamweaver, you can edit Fireworks behaviors by using the Dreamweaver Behaviors panel. 


Add simple interactivity to slices ener 


The drag-and-drop rollover method is fast and efficient way to create rollover and swap-image effects. The drag-and-drop rollover method allows 
you to determine what happens to a slice when the pointer passes over it. The end result is a graphic that is commonly referred to as a rollover 
image. 


When a slice is selected, a round circle with cross hairs appears in the center of the slice. This is called a behavior handle. 


A B c 


A. Slice name B. Behavior handle C. Selection handle 


By dragging the behavior handle from a triggering slice and dropping it onto a target slice, you can easily create rollover and swap-image effects. 
The trigger and target can be the same slice. 


Note: Hotspots also have behavior handles for incorporating rollover effects. 


About rollovers 
Rollovers all work the same way: when the mouse pointer rolls over one graphic, that action triggers the display of another graphic. The trigger is 
always a web object (a slice, a hotspot, or a button). 


The simplest rollover swaps an image in State 1 with an image directly below it in State 2. You can build more complicated rollovers as well. Swap- 
image rollovers can swap in images from any state. Disjoint rollovers swap in an image from a slice other than the trigger slice. 


163 


When you select a trigger web object created by using a behavior handle or the Behaviors panel, all of its behavior relationships are displayed. 


By default, a blue behavior line represents a rollover interaction. 


Create and attach a simple rollover 
A simple rollover swaps in the state directly under the top state and involves only one slice. 


Ensure that the trigger object is not on a shared layer. 
Select Edit > Insert > Rectangular Slice or Polygon Slice to create a slice on top of the trigger object. 


Create a new state in the States panel by clicking the New/Duplicate State button. 


oe TS ae 


Create, paste, or import an image to use as the swap image on the new state. 
Position the image beneath the slice you created in step 2. Although you are in state 2, the slice is visible. 
5. Select State 1 in the States panel to return to the state that has the original image. 


6. Select the slice and place the pointer over the behavior handle. 


Note: You can select the slice while in any state. 
7. Click the behavior handle and select Add Simple Rollover Behavior from the menu. 


8. Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser. 


Create and attach a disjoint rollover 
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A disjoint rollover swaps in an image under a web object when the pointer rolls over another web object. In response to a pointer rolling over or 
clicking a trigger image, an image appears in a different location on the web page. The image that is rolled over is the trigger; the image that 
changes is the target. 


You must first set up the trigger, target slices, and the state in which the swap image resides. Then you can link the trigger to the target slice with 
a behavior line. The trigger for a disjoint rollover can be a slice, a hotspot, or a button. 


1. Select Edit > Insert > Rectangular Slice, Polygon Slice, or Hotspot to attach a slice or hotspot to the trigger image. (Omit this step if the 
selected object is a button or if a slice or hotspot already covers the image.) 


Create a new state by clicking the New/Duplicate State button in the States panel. 

Place a second image (the target) in the new state. 

Place the state anywhere on the canvas except beneath the slice you created in step 1. 

Select the image, and then select Edit > Insert > Rectangular Slice or Polygon Slice to attach a slice to the image. 
Select State 1 in the States panel to return to the state that has the original image. 


Select the slice, hotspot, or button that covers the trigger area (the original image) and place the pointer over the behavior handle. 


Oo NO Ol Be ON 


Drag the behavior handle for the trigger slice or hotspot to the target slice. 


The behavior line extends from the center of the trigger to the upper left of the target slice, and the Swap Image dialog box opens. 


Swap Image 


9. From the Swap Image From pop-up menu, select the state you created in step 2, and click OK. 


10. Preview and test the disjoint rollover. 


Apply multiple rollovers to a slice 


A slice triggering a rollover behavior and a disjoint rollover behavior 


1. Drag a behavior handle from the selected slice to the edge of the same slice or onto another slice. 
e To create a swap image, drag the handle to the upper left edge of the same slice. 
e To create a disjoint rollover, drag it to another slice. 


2. Select the state of the swap image and click OK. 


Remove a drag-and-drop rollover from a slice, hotspot, or button 
& Click the blue behavior line you want to remove, and click OK. 


Add complex interactivity to slices Sa 


Use options on the Behaviors panel to create and edit custom interactions. Custom interactions are based on existing behaviors. 
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Behavior options 

Note: The drag-and-drop rollover method is recommended for simple, disjoint, and complex rollovers. 

Simple Rollover Adds a rollover behavior to the selected slice using State 1 as the Up state and State 2 as the Over state. After you select this 
behavior, you need to create an image in the second state, under the same slice, to create the Over state. The Simple Rollover option is actually a 
behavior group containing the Swap Image and Swap Image Restore behaviors. 

Set Nav Bar Image Allows a slice to be part of a Fireworks navigation bar. Each slice that is part of the navigation bar must have this behavior. 
The Set Nav Bar Image option is actually a behavior group containing the Nav Bar Over, Nav Bar Down, and Nav Bar Restore behaviors. This 
behavior is automatically set for you by default when you use the Button Editor to create a button that includes an Include Over While Down state 
or Show Down Image Upon Load state. When you create a two-state button, a simple rollover behavior is assigned to its slice. When you create a 
three- or four-state button, a Set Nav Bar Image behavior is assigned to its slice. 

Note: You cannot change the event for Simple Rollover and Set Nav Bar Image. 

Swap Image Replaces the image under the specified slice with the contents of another state or the contents of an external file. 

Swap Image Restore Restores the target object to its default appearance in State 1. 

Nav Bar Over Specifies the Over state for the currently selected slice when it is part of a navigation bar and optionally specifies the Preload 
images state and Include Over While Down state. 

Nav Bar Down Specifies a Down state for the currently selected slice when it is part of a navigation bar and optionally specifies a Preload images 
state. 

Nav Bar Restore Restores all the other slices in the navigation bar to their Up state. 

Set Pop-up Menu Attaches a pop-up menu to a slice or hotspot. When you apply a pop-up menu behavior, you can use the Pop-up Menu Editor. 
Set Text of Status Bar Lets you define text for display in the status bar at the bottom of most browser windows. 


Attach behaviors to a selected slice 


1. Click the Add Behavior button in the Behaviors panel. 


Everts Actions Info 


a0 8 
A. Add Behavior button B. Remove Behavior button 


2. Select one or more behaviors. 


Change the mouse event that activates the behavior 

1. Select the trigger slice or hotspot containing the behavior you want to modify. 
All behaviors associated with that slice or hotspot are displayed in the Behaviors panel. 

2. Select the behavior you want to edit. 

3. Click the arrow beside the event and select a new event from the pop-up menu. Simple Rollover behavior does not have this option. 
onMouseOver Triggers the behavior when the pointer rolls over the trigger area. 
onMouseOut Triggers the behavior when the pointer leaves the trigger area. 
onClick Triggers the behavior when the trigger object is clicked. 


onLoad Triggers the behavior when the web page is loaded. 


Use external image files for swap images 

You can use an image outside the current Fireworks document as the source for a swap image. Source images can be in GIF, animated GIF, 
JPEG, or PNG format. When you select an external file as the image source, Fireworks swaps that file with the target slice when the swap image 
is triggered in a web browser. 


If the file isn't the same width and height as the slice it is swapping into, the browser resizes the file to fit within the slice object. Especially for 
animated GIFs, resizing a file can reduce its quality. 


1. In the Swap Image, Nav Bar Over, or Nav Bar Down dialog box, select Image File and click the folder icon. 


2. Navigate to the file you want to use and click Open. 
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3. If the external file is an animated GIF, deselect Preload Images. Doing so prevents problems when displaying animated GIFs as rollover 
states. 


Note: Fireworks creates document-relative paths to image files. If you are exporting your document for use on the web, be sure that your 
external image file is accessible from the exported Fireworks HTML. Place external files in your local site before using them as swap images 
in Fireworks, and be sure to upload external image files when you upload your files to the web. 


More Help topics 
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Preparing slices for export 


Assign URLs to slices 

Enter alternate text 

Assign a target for a selected slice or hotspot 
Name slices 

Define how HTML tables are exported 


Use the Property inspector to prepare slices for export. 


$ PROPERTIES 


Slice Type: | Foreground Image w E Link: | http://www. myurl.com ~ 
untitled _00C 4) GIF WebSnap 128 | Alt: | Go to my URL 
w: | 93 Xx: | 146 Target: | _self {v 


H: |103 |Y: |93 


Slice properties in the Property inspector 


Q To quickly optimize a slice, select a preset from the Export Settings pop-up menu in the Property inspector or Optimize panel. To set detailed 
options, see Optimize in the workspace. 


Assign URLs to slices To the top 


When you assign a URL to a slice, users can navigate to that address by clicking the area defined by the slice in their web browser. 
& To assign a URL, enter the URL in the Link text box of the Property inspector. 


If your file contains a number of pages that you will be exporting, use the Link pop-up menu to select one of the pages for the URL. After the 
pages are exported, this link will automatically take the user to the specified page. 


Q If you intend to reuse URLs, create a URL library in the URL panel. 


To thet 
Enter alternate text o the top 


Entering brief, meaningful alternate text (alt text) is important for the growing number of visually impaired people who use screen-reading 
applications. These applications read alternate text in a computer-generated voice when the user passes the pointer over graphics on a web page. 


& In the Property inspector, type the text in the Alt Text box. 


Select slices or hotspots without alternate text 
You can select the slices and hotspots for which you haven't entered alternate text. You can then set a default alternate text for these objects. 


& Select Commands > Web > Select Blank ALT Text. 


Set default alternate text 
You can select the slices and hotspots for which you haven’t entered alternate text and set a default ALT text for all of them. 


“ Select Commands > Web > Set ALT Text and enter the default alternate text. 


Assign a target for a selected slice or hotspot fener 


A target is an alternate web page state or web browser in which the linked document opens. 

“* Type the name of the HTML state in the Target text box or select a reserved target from the Target pop-up menu: 

_blank Loads the linked documents in a new, unnamed browser window. 

_ parent Loads the linked document in the parent state set or window of the state that contains the link. If the state containing the link is not 
nested, the linked document loads into the full browser window. 

_self Loads the linked document in the same state or window as the link. Because this target is implied, you usually don’t need to specify it. 
_top Loads the linked document in the full browser window, thereby removing all states. 


Š To the to 
Name slices j 
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Slicing cuts an image into pieces. Because each piece of a state is exported separately, each must have a unique name. Use the default naming 
convention or assign custom names. 


Note: Do not add a file extension to the base name. Fireworks automatically adds file extensions to slice files upon export. 
Enter a custom slice name 
** Do one of the following: 

e Select the slice on the canvas, enter a name in the Edit The Object Name box in the Property inspector, and press Enter. 


e Double-click the name of the slice in the Web Layer, enter a new name, and press Enter. 


Auto-name a slice file 
& When you export your sliced image, enter a name in the File Name (Windows) or Name (Mac OS) text box in the Export dialog box. Do not add 
a file extension. 


Change the default auto-naming convention 
You can create a naming convention that contains up to eight elements. An element can consist of any of the following auto-naming options: 


Option Description 

None No name is applied to the element. 

doc.name The element takes the name of the document. 

"slice" You can insert the word “slice” into the naming convention. 

Slice # (1,2,3...) The element is labeled numerically or alphabetically, according to 


Slice # (01,02,03...) the style you select. 


Slice # (A,B,C...) 


Slice # (a,b,c...) 

row/column (r3_c2, r4_c7...) Row (r##) and Col (c##) designate the rows and columns of the 
table that web browsers use to reconstruct a sliced image. You 
can use this information in the naming convention. 

Underscore The element uses any of these characters typically as separators 

: between other elements. 

Period 

Space 

Hyphen 


For example, if the document name is mydoc, the naming convention doc.name + “slice”+ Slice # (A,B,C...) results in a slice called mydocsliceA. 


If a slice has more than one state, by default Fireworks adds a number to each state's file. For example, if you enter the custom slice filename 
home for a three-state button, then Fireworks names the Up state graphic home.gif, the Over state graphic home_s2.gif, and the Down state 
graphic home_s3.gif. You can create your own naming convention for multistate slices using the HTML Setup dialog box. 


1. Select File > HTML Setup to open the HTML Setup dialog box. 
2. Click the Document Specific tab. 


3. In the Slice File Names section, create your new naming convention by selecting from the lists. 
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HTML Setup 


Slice file names: 


[doc.name v + Underscore v rowscolumn (r3_c2, r4_c7. Y 


[None vi + [None v None v 


State names: |Underscore State # (f2, f3, f4...) ~ 


Example: _r1_c2_f2.gif 


Default ALT tag: 


[C] Export multiple nav bar HTML files (for use without frame sets) 
Include areas without slice objects 
UTF-8 encoding 


Set Defaults 


4. (Optional) To set this information as the default for all new Fireworks documents, click Set Defaults. 


Note: Use caution when selecting None as a menu option for slice auto-naming. If you select None as the option for any of the first three 
menus, Fireworks exports slice files that overwrite one another, resulting in a single exported graphic and a table that displays this graphic in 
every cell. 


Define how HTML tables are exported 


To the top 


Slicing defines how the HTML table structure appears when a Fireworks document is exported for use on the web. 


When you export a sliced Fireworks document to HTML, your document is reassembled using an HTML table. Each sliced element from the 
Fireworks document resides in a table cell. Once exported, a Fireworks slice translates to a table cell in HTML. You can specify how a Fireworks 
table is reconstructed in a browser, including the use of spaces or nested tables. 


e Spacers are images that help table cells align properly when viewed in a browser. 


e A nested table is a table within a table. Nested tables do not use spacers. They may load more slowly in browsers, but because there are no 
spacers, it is easier to edit their HTML. 


f: 
2: 


Select File > HTML Setup, or click the Options button in the Export dialog box. 
Click the Table tab. 


. Select a spacing option from the Space With pop-up menu: 


Nested Tables — No Spacers Creates a nested table with no spacers. 


Single Table — No Spacers Creates a single table with no spacers. This option can cause tables to be displayed incorrectly in some 
cases. 


1-Pixel Transparent Spacer Uses a 1-pixel-by-1-pixel transparent GIF as a spacer that is resized as needed in the HTML. This 
generates a 1-pixel-high row across the top of the table and a 1-pixel-wide column down the right side. 


. Select a cell color for HTML slices: 


Note: Ifyou select a color from the color pop-up window, it applies only to HTML slices; image slices continue to use the canvas color. 


. From the Contents pop-up menu, select what to place in empty cells: 


None Causes empty cells to remain blank. 
Spacer Image Places a small transparent image called spacer.gif in empty cells. 


Non-breaking Space Places an HTML space tag in empty cells. The cell appears hollow. 
Note: Empty cells occur only if you deselect Include Areas Without Slices in the Export dialog box during export. 


. Click OK. 


Note: You can specify unique table export settings for each document, or you can use the Set Defaults button on the Document 
Specific tab of the HTML Setup dialog box to apply defaults for all new documents. 


More Help topics 
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Creating buttons and pop-up menus 


Button symbols 


Create button symbols 
Edit button symbols 


Create button symbols To the top 


Buttons are a special type of symbol used as navigation elements for a web page. You can easily edit buttons using the Property inspector. 
Because you can drag instances of a button from the symbol library into your document, you can change the graphical appearance of a single 
button and automatically update the appearance of all button instances in a navigation bar. 


You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the 
symbol-instance relationship. 


A button instance is encapsulated. Fireworks moves all the components and states associated with the buttons that you drag into the document. 


Like other symbols, buttons have a registration point (a center point that helps you align text and the different button states while you edit the 


button). 
1. Select the object that you want to convert to a button. 
2. Select Modify > Symbol > Convert To Symbol. 
3. In the Convert To Symbol dialog, enter a name for the button. 
4. In the Type options, select Button. 
5. (Optional) To enable 9-slice scaling for the button, select Enable 9-Slice Scaling guides. 
6. (Optional) To save the graphic as a button to the graphics library in Fireworks, select Save To Common Library. 


Apply states to buttons 

A button can have up to four different states, which represent the appearance of the button in response to a mouse event. Two-state buttons have 
Up and Down states. Three- and four-state buttons have the Over state and the Over While Down states. These states represent the appearance 
of the button when the pointer is moved over it when the button is up (Over) or down (Over While Down). 


You can create a navigation bar using two-state or three-state buttons. However, only buttons with all four states can take advantage of the built-in 
Nav Bar behaviors in Fireworks. 


Create a simple two-state button 
1. To enter symbol-editing mode, do either of the following: 
e Double-click an existing button on the canvas. 
e Choose Edit > Insert > New Button. 
2. Do one of the following to import or create the Up state graphic: 
e Drag and drop or import the graphic that you want to appear as the button's Up state into the work area. 
e Use the drawing tools to create a graphic or use the Text tool to create a button from text. 


e Click Import A Button from the Property inspector and select a ready-made editable button from the Import Symbols: Button library. With 
this option, each of the button's states is automatically filled with the appropriate graphics and text. 


e (Optional) Set the 9-slice scaling guides to keep the button shape from being distorted when it is resized. (See Apply 9-slice guides to a 
symbol.) 


e (Optional) Select the Text tool and create text for the button. 

3. To create the Over state, select Over from the pop-up menu and do one of the following: 
e Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it. 
e Drag and drop, import, or draw a graphic. 


4. (Optional) To use Live Filters to create common appearances for each state, select the graphic to which you want to add a Live Filter and 
click the plus (+) icon next to the Filters label in the Property inspector. 
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5. Select Bevel And Emboss > Inner Bevel, or Inset Emboss, or Outer Bevel, or Raised Emboss. 


6. Select a button preset filter for each state. 


Button preset filter Description 


The bevel appears to rise from the underlying objects. 


The button's colors lighten. 


Highlighted 


The bevel appears to sink into the underlying objects. 


Inset 


The bevel appears to sink into the underlying objects, and the 
colors lighten. 


weave FNS 


Inverted 


Create a three- or four-state button 
Although four-state buttons are not mandatory, using them lets you take advantage of the built-in Nav Bar behaviors. 


1. With a two-state button open in the canvas in the symbol editing mode, select Down from the pop-up menu in the Property inspector and do 
one of the following: 


e Click Copy Over Graphic to paste a copy of the Over state button into the Down window, and then edit it to change its appearance. 
e Drag and drop, import, or draw a graphic. 

2. To add an Over While Down state, verify that the Down state button is open and repeat step 1. 

3. (Optional) Apply preset filters to buttons. 


Note: When you insert or create a graphic for the Down or Over While Down states, the options for including the state in the navigation bar 
are selected automatically. 


Convert Fireworks rollovers into buttons 


You can convert buttons from rollovers that were created in previous versions of Fireworks and save them in the library. For more information 
about rollovers, see Interactive slices. 


1. Delete the slice or hotspot covering the rollover images. 

2. Select Show All States from the Onion Skinning menu in the States panel. 

3. Select all the objects you want to include in the button. Use the Select Behind tool to select hidden objects. 
4. Select Modify > Symbol > Convert to Symbol. 

5. Enter a name for the symbol in the Name box and select a Button symbol type. 


Q To convert four-state animations to buttons, select all four objects to place each on its own button state. 


Insert and import button symbols 
You can insert instances of button symbols into a document from the Common Library panel. You can also import existing button symbols into the 
Document Library panel of a new document. For more information, see Import and export symbols. 


1. To insert instances of a button into a document, open the Common Library panel and drag the button symbol to the document. 
2. To place additional instances of a button symbol, do one of the following: 
e Select an instance, and then select Edit > Clone to place another instance directly in front of the selected instance. The new instance 


becomes the selected object. 
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e Drag another button instance from the Document Library panel to the document. 
e Alt-drag (Windows) or Option-drag (Mac OS) an instance on the canvas to create another button instance. 
e Copy an instance and then paste additional instances. 
3. To import button symbols into the Document Library panel of a new document, do one of the following: 
e Drag and drop (or cut and paste) a button instance from another Fireworks document. 
e Import button symbols from a Fireworks PNG file. 


e Export button symbols from another Fireworks document to a PNG library file, and then import button symbols from the PNG library file 
into the document. 


e Select Import Symbols from the Document Library panel Options menu. The libraries contain a wide variety of premade button symbols 
prepared by Adobe. 


Edit button symbols To the top 


You can edit multiple instances of button properties at the symbol level or you can edit single instances of button properties. 


Edit button properties at the symbol level 


“* Double-click the button to change the button's characteristics. Click the page icon on top of the canvas or double-click outside the button to 
return to the canvas. 


Editable symbol-level button properties usually are consistent among buttons in a navigation bar. See the following examples: 
e Graphical appearance such as stroke color and type, fill color and type, path shape, and images 
e Live Filters or opacity applied to individual objects in the button symbol 
e Size and position of the active area 
e Core button behavior 
e Optimization and export settings 
e URL link (also available as an instance-level property) 


e Target (also available as an instance-level property) 


Edit button properties at the instance level 
& Select the button instance in the work area, and set the properties in the Property inspector. 


Editable instance-level properties typically differ from button to button in a series of buttons. You can change instance-level properties for an 
instance without affecting the associated symbol or any other instances of that symbol. See the following examples: 


e Object name of an instance, which appears in the Layers panel and is used for naming the exported slices for the button instance upon 
export 


e Live Filters or opacity applied to the entire instance 

e Text characters and text formatting 

e URL link (overrides any URL that exists as a symbol-level property) 

e Alternate (alt) image description 

e Target (overrides any target frame that exists as a symbol-level property) 

e Additional behaviors assigned to an instance by using the Behaviors panel 

e The Show Down State On Load option in the Property inspector for instances in a navigation bar 


Note: When you select the Export Multiple Files option from the Document Specific section of the HTML Setup dialog box and then export a 
navigation bar, Fireworks exports each HTML page with the corresponding Down state of the button. See Set HTML export options . 


Set interactive button properties 
You can control the following interactive elements of a button: 


Active area The active area triggers interactivity when a user moves the pointer over it or clicks it in a web browser. The active area of a button 
is a symbol-level property and is unique to button symbols. Select Active Area from the pop-up menu to edit a button slice or draw hotspot objects. 
If you draw a new slice, the new slice replaces the previous slice. 

URL for a button symbol or instance The URL can be a symbol- or instance-level button property. It links the button to another web page, 
website, or anchor on the same web page. You can attach a URL to a selected button instance in the Property inspector or in the URL panel. 
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Button target The button target is the window or frame in which the destination web page appears when a button instance is clicked. If you don't 
enter a target in the Property inspector, the web page appears in the same frame or window as the link that called it. The target can be a symbol- 
or instance-level button property. You can set the target for a symbol, so that all instances of the symbol have the same target option. 

Alternate (alt) text for a button symbol or instance Alternate (alt) text appears on or near an image placeholder while an image is downloading 
or in place of an image if it fails to download. It also replaces graphics if the user has the browser set to refrain from displaying images. Alt text can 
be a symbol- or instance-level button property. 


Edit interactive button properties 
Note: Changing the target, URL, or alt text for a button symbol doesn’t change existing button instances of that symbol. 


1. Open the button symbol in the symbol editing mode. 
2. Do one of the following: 


e To edit a slice or hotspot in the button symbol's active area, select Active Area from the pop-up menu in the property inspector. Use the 
Pointer tool to move or reshape the slice or a slice guide. Or, use any of the slice or hotspot tools to draw a new active area. 


e To set the URL for a button symbol, select Active Area from the pop-up menu. Then enter the URL in the Link box in the Property 
inspector, select a page from the list, or select a URL from the URL panel. 


Note: When entering absolute URLs within a site, you can attach a URL to a symbol so that the same URL appears in the Link box in 
the Property inspector for each instance. 


e To set the target for a button symbol, open the button in the workspace. Then enter a target in the Target box, or select one of the 
following preset targets from the Target menu in the Property inspector: 


None or _self Loads the web page into the same frame or window as the link 

_blank Loads the web page into a new, unnamed browser window 

_ parent Loads the web page into the parent frameset or window of the frame that contains the link 
_top Loads the web page into the full browser window, removing all frames 


e To set the alt text for a button symbol or button instance, select the button instance in the workspace. Then, in the Property inspector, 
enter the text or description you want to apply. 
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Navigation basics 


About navigation features 
Create a basic navigation bar 


P à To thet 
About navigation features e 


Simplify navigation within your documents by adding buttons, menus, and navigation bars. Using Adobe® Fireworks®, you can easily create and 
implement these navigation aids, even if you know nothing about JavaScript and CSS code. 


When you export a button or pop-menu, Fireworks automatically generates the CSS code or JavaScript necessary to display it in a web browser. In 
Adobe Dreamweaver, you can easily insert CSS code, JavaScript, and HTML code from Fireworks into your web pages or into any HTML or CSS 
file. 


P 7 a To thet 
Create a basic navigation bar ee 


A navigation bar is a group of buttons that provide links to different areas of a website. A navigation bar generally remains the same throughout the 
site to provide a consistent method of navigation. However, links from the navigation bar can differ to meet the needs of certain pages. 


To create a consistent navigation experience, you duplicate button symbols by using symbol instances. If you edit the appearance or functionality 
of the original symbol, all associated instances automatically update to reflect your changes. (See Symbols.) 


1. Create a button symbol. 
2. Drag an instance (copy) of the symbol from the Document Library panel to the workspace. 
3. Do one of the following to make a copy of the button instance: 
e Select the button instance and select Edit > Clone. 
e Alt-drag (Windows) or Option-drag (Mac OS) the button instance. 
4. Shift-drag a button to align it horizontally or vertically. For more precise control, use the arrow keys to move the instance. 
5. Repeat steps 3 and 4 to create additional button instances. 


6. Select each instance and use the Property inspector to assign it unique text, a URL, and other properties. 
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Pop-up menus 


Create menus 

Change the appearance of a pop-up menu 

Add custom menu styles to the Pop-up Menu Editor 
Set advanced cell properties 

Change the position of pop-up menus and submenus 
Edit or move items in pop-up menus 

Exporting pop-up menus 


Pop-up menus are displayed in a browser when the user moves a pointer over or clicks a triggering web object, such as a slice or hotspot. 


Create menus 


Each pop-up menu item appears as an HTML or image cell. The cell has an Up state, an Over state, and text in both states. 

You can attach URL links to pop-up menu items for navigation, and you can create as many submenu levels as you like in pop-up menus. 
You can use any or all of the tabs and can edit tab settings at any time. 

You must add at least one menu item in the Contents tab to create a menu option you can preview in a browser. 


To preview a pop-up menu, press F12. Pop-up menus don't display in the Fireworks workspace. 


To the top 


Create a simple pop-up menu 


1; 
2: 


Select a hotspot or slice that becomes the trigger area for the pop-up menu. 
Do one of the following: 

e Select Modify > Pop-up Menu > Add Pop-up Menu. 

e Click the behavior handle in the middle of the slice and select Add Pop-up Menu. 
Click the Content tab and then click the Add Menu. 


Double-click each cell and enter or select the appropriate Text, Link, and Target information. For the Link and Target fields, enter custom 
information or select from the displayed menus. Entering content on the last line in the window adds an empty line below it. 


Q Press the Tab key to move between cells and the Up Arrow and Down Arrow keys to scroll through the list vertically. 
Repeat steps 3 and 4 until you have added all menu items. To delete a menu item, click the Delete Menu button. 
Click Next or Done, or select another tab. 


In the workspace, the hotspot or slice on which you built the pop-up menu displays a blue behavior line attached to an outline of the top level 
of the pop-up menu. 


Create submenus within a pop-up menu 


Submenus are pop-up menus that appear when the user moves the pointer over or clicks another pop-up menu item. You can create as many 
levels of submenus as you want. 


1: 


Change the appearance of a pop-up menu 


Open the Content tab of the Pop-up Menu Editor and create menu items. Place the menu items that you wish to use for the submenu 
directly under the menu item for which they will be a submenu. 


Highlight a pop-up menu item that you wish to make a submenu item, and then click the Indent Menu button. 


To add the next item to the submenu, highlight it and click Indent Menu. Or, to insert a new item just below the highlighted item, highlight a 
menu or submenu item and click Add Menu. 


All items that are contiguously indented at the same level constitute a single pop-up submenu. 


To create a submenu within a pop-up submenu, highlight a submenu item in the Content tab of the Pop-up Menu Editor, and then click the 
Indent Menu button again. 


Click Next to continue building the pop-up menu, or click Done. 


To the top 
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After you create a basic menu and optional submenus, you can format the text, apply graphic styles to the Over and Up states, and select vertical 
or horizontal orientation in the Appearance tab of the Pop-up Menu Editor. 


1. With the pop-up menu open in the Pop-up Menu Editor, click the Appearance tab. 
2. Select Vertical or Horizontal from Choose Alignment Of The Pop-up Menu. 
3. Select a Cells option: 
HTML Sets the menu's appearance using only HTML code. This setting produces pages with smaller file sizes. 
Image Gives you a selection of graphic image styles to use as the cell background. This setting produces pages with larger file sizes. 
4. Select a preset size from the Size pop-up menu or enter a value in the Size text box. 


Note: When cell width and height are set to Automatic in the Advanced tab of the Pop-up Menu Editor, text size determines the size of 
graphics associated with the menu item. 


5. Select a system font group from the Font pop-up menu, or enter the name of a custom font. 

Note: If users don't have the font you select installed on their system, a replacement font will be displayed in their web browser. 
(Optional) Apply a style, justification, and color to the text. 

Select the text and cell colors for each state. 


If Image is selected as the cell type, select a graphical style for each state. 


O on o 


Continue building the pop-up menu, or click Done. 


Add custom menu styles to the Pop-up Menu Editor ee 


Select a cell style for use when Image is selected as the cell style. For more information about styles, see Create and delete styles. 


Note: The exact location of the Menu Bars folder varies depending on your operating system. For more information, see Customize using 
configuration files. 


1. Apply any combination of stroke, fill, texture, and Live Filters to an object, and save it as a style using the Styles panel. 
2. Select the new style in the Styles panel, and then select Save Style Library from the Styles panel Options menu. 


3. Navigate to the Menu Bars folder on your hard disk, rename the style file if you wish, and click Save. 


To thet 
Set advanced cell properties een 


1. Open the Pop-up Menu Editor and click the Advanced tab. 
2. Select a width or height constraint from the Automatic/Pixels pop-up menu: 


Automatic Forces the cell height to conform to the text size set in the Appearance tab of the Pop-up Menu Editor and the cell width to 
conform to the menu item that contains the longest text 


Pixels Allows you to enter specific measurements in pixels in the Cell Width and Cell Height text boxes 
Enter a value in the Cell Padding text box to determine the distance between pop-up menu text and the edge of the cell. 
Enter a value in the Cell Spacing text box to set the amount of space between menu cells. 


Enter a value in the Text Indent text box to set the amount of indention for pop-up menu text. 


oa e w 


Enter a value in the Menu Delay text box to set the amount of time in milliseconds that the menu remains visible after the pointer is moved 
away from it. 


7. Select whether to show or hide pop-up menu borders. If you select to show borders, set the border attributes. 


8. Continue building the pop-up menu, or click Done. 


Change the position of pop-up menus and submenus To the top 


Use the Position tab of the Pop-up Menu Editor to specify a pop-up menu's position. You can also position a top-level pop-up menu by dragging 
its outline in the workspace when the Web Layer is visible. 


hanging the position of pop-up menus and submenu. 


Set a specific position for a pop-up menu or submenu 
1. With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab. 
2. Do one of the following to define the menu position: 
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e Click a Position button to position the pop-up menu relative to the slice that triggers it. 
e Enter x and y coordinates. Coordinates of 0,0 align the upper-left corner of the pop-up menu with the upper-left corner of the slice or 
hotspot that triggers it. 


3. Define a submenu position: 
e Click a Submenu Position button to position the submenu relative to the pop-up menu item that triggers it. 


e Enter x and y coordinates. Coordinates of 0,0 align the upper-left corner of the pop-up submenu with the upper-right corner of the menu 
or menu item that triggers it. 


4. Set a relative position: 
e To make each submenu's position relative to the parent menu item that triggers it, deselect Place In Same Position As Parent. 


e To make each submenu's position relative to the parent pop-up menu, select Place In Same Position As Parent. 


5. Click Done to close the Pop-up Menu Editor, or click Back to modify properties on other tabs. 


Set the position for a pop-up menu by dragging it 
1. Do one of the following to display the Web Layer: 
e Click the Show Slices And Hotspots button in the Tools panel. 
e Click the Eye column in the Layers panel. 
2. Select the web object that is the trigger for the pop-up menu. 


3. Drag the pop-up menu outline to another location in the workspace. 


A ë š To thet 
Edit or move items in pop-up menus eed 


In the Pop-up Menu Editor, you can edit or update the contents of a pop-up menu, rearrange the menu items, or change other properties on any of 
the four tabs. 


1. Do one of the following to display the Web Layer: 
e Click the Show Slices And Hotspots button in the Tools panel. 
e Click the Eye column in the Layers panel. 

2. Select the slice the pop-up menu attaches to. 

3. Double-click the pop-up menu's blue outline in the workspace. 


4. In the Pop-up Menu Editor, make changes on any tab. 


Edit menu text 
1. Open the pop-up menu in the Pop-up Menu Editor, and click the Content tab. 


2. Double-click the Text, Link, or Target text boxes and edit the menu text. Then click outside the entry list to apply the change. 


Move a menu item 
1. Highlight the menu item in the Content tab of the Pop-up Menu Editor. 
2. Do either of the following: 
e To move the item to a higher-ranking submenu or into the main pop-up menu, click the Outdent Menu button. 


e To move the item to a different location in the same menu, drag the item to the desired location in the list. 


Exporting pop-up menus To the top 


Fireworks generates all the CSS code or JavaScript (depending on which option you select) necessary to view pop-up menus in web browsers. 


If you use CSS code for your pop-up menus, a Fireworks document containing pop-up menus is exported to HTML using CSS code. You can also 
have the CSS code written to an external .css file, and export that file along with an mm_css_menu.js file to the same location as the HTML file. 


The alternative to using CSS code is to use JavaScript. If you use JavaScript, a Fireworks document containing pop-up menus is exported to 
HTML, and a JavaScript file called mm_menu.js is exported to the same location as the HTML file. 


When you upload the files, upload mm_css_menu.js (or mm_menu.js, for JavaScript) to the same directory location as the web page containing 
the pop-up menu. To post the file to a different location, update the hyperlink referencing mm_css_menu.js and the .css file (or mm_menu.js) in 
the Fireworks HTML code to reflect the custom location. A unique .css file is exported for every document containing CSS pop-up menus that you 
export as HTML and images from Fireworks. 
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When you include submenus, Fireworks generates an image file (arrows.gif), which is a tiny arrow that appears next to any menu entry that has a 
submenu. Regardless of the number of submenus a document contains, Fireworks always uses the same arrows.gif file. 


For more information about exporting HTML, see Export HTML. 


O 
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Prototyping websites and interfaces 


Prototyping websites and interfaces using Fireworks pages 


Add, delete, and navigate pages 
Edit a page canvas 

Use a master page 

Export selected pages 
Multi-page preview 


A single Fireworks PNG file can contain multiple pages, providing a perfect way to prototype web and application interfaces. Each page contains 
unique settings for canvas size and color, image resolution, and guides. You set these options either on a per-page basis, or globally across all 

pages in a document. Other than the Web layer, each page also contains a unique set of layers. For common elements, however, you can use a 
master page or share layers across pages. (See Share layers.) 


Q If you don't create any pages, all of the elements of your document reside on a single page. 


You view pages in the Pages panel, where the objects on each page are displayed in a thumbnail next to the page name. The active page is 
highlighted in the panel and shown in the pages pop-up menu above the active document. 


For information about exporting pages, see Export from the workspace 
` To thet 
Add, delete, and navigate pages ii 


Using the Pages panel, you can add new pages, delete unwanted pages, and duplicate existing pages. When you add, delete, or move pages, 
Fireworks automatically updates the number to the left of page titles. These auto-numbers help you quickly navigate to specific pages in large, 
multipage designs. 


Add a page 
A blank page is inserted at the end of the list of pages and becomes the active page. 


e Do one of the following: 


e In the Pages panel, click the New/Duplicate Page button ®. 
e Right-click the panel, and choose New Page from the pop-up menu. 


e Select Edit > Insert > Page. 


Navigate to a page 
e Do one of the following: 
e Inthe Pages panel, select a page. 
e On the keyboard, use the Page Up and Page Down buttons. 


e Choose the page from the pages pop-up menu at the top of the document window or bottom right of the Pages panel. 


Q An asterisk next to the page name in the pages pop-up menu indicates the master page. 


Duplicate a page 
Duplicating adds a new page that contains the same objects and layer hierarchy as the currently selected one. Duplicated objects retain the 
opacity and blending mode of the original objects. You can change the duplicated objects without affecting the originals. 


e Do one of the following: 


e Drag a page to the New/Duplicate Page button. 


e Right-click the page, and select Duplicate Page from the pop-up menu. 


Move one or more pages 
In the Pages panel, move pages to place related designs closer together and speed up the layout process. 
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1. (Optional) If you're moving multiple pages, do either of the following: 


e Shift-click them to select a contiguous group. 
e Ctrl-click (Windows) or Command-click (Mac OS) them to select a discontiguous group. 


2. Drag selected pages up or down in the panel. Above and below other pages, darkened borders appear where you can release the mouse to 
move the selected pages. 


Delete a page 
The page above the deleted one becomes the active page. 


e Do one of the following: 


e Inthe Pages panel, drag the page to the trash can icon ff. 


e Right-click the page, and choose Delete Page from the pop-up menu. 


š To thet 
Edit a page canvas o the top 


Each page has a unique canvas, with independent canvas size, color, and image resolution. 
1. Select a page from the Pages panel or the pages pop-up menu at the top of the document window. 
2. Select Modify > Canvas > Image Size, Modify > Canvas > Canvas Color, or Modify > Canvas > Canvas Size. 
3. Make the changes. These changes can also be made using the Properties panel when the canvas for a page is selected. 


4. To apply the changes to only the selected page, leave the Current Page Only option selected. To apply the changes to all pages, deselect 
the option. 


To thet 
Use a master page o the top 


To use a set of elements across all of your pages, use a master page. When you convert an ordinary page to a master page, the page moves to 
the top of the list in the Pages panel. When a master page is created, a Master Page Layer is added at the bottom of the layer hierarchy for each 


page. 


Create a master page 
e Inthe Pages panel, right-click an existing page, and choose Set As Master Page from the pop-up menu. 


Any layers shared across pages become ordinary (non-shared) layers. However, layers shared across frames remain. To display master page 
frames in a linked page, see View objects in a state. 


Link pages to the master page 
After you create a master page, any newly created pages automatically inherit the master page settings. Existing pages don’t inherit these settings 
unless you link them to the master page. If you later change the master page, all linked pages update automatically. 


The following limitations apply to inheritance of objects and behaviors from master pages to other pages: 


e Pages inherit only the current state of all objects in a master page. To inherit all states of all objects, on each page, add equal or more states 
to the object with the highest number of states. All objects in that page inherit all states from the master page. 


e Changes to the canvas size or image size on a page affect all pages, including pages that are not linked to the master page. To limit the 
changes to only the current page, select Current Page Only. 


e Only the linked pages inherit changes to the canvas color of the master page. 
e Do one of the following: 


e Inthe Pages panel, right-click a page, and choose Link To Master Page from the pop-up menu. 
e Click in the column to the left of the page thumbnail in the Pages panel. A link icon shows that the page is linked to the master page. 


Note: When you change a setting on a page linked to the master page, the new setting prevails but breaks the link to the master page. 


Show or hide the master page layer 
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A change in visibility is reflected across all pages. 


e Inthe Layers panel, click the eye icon to the left of the master page layer. 


Remove master page layers 
e Right-click the Layers panel, and select Remove Master Page Layer from the pop-up menu. 


To add the master page layer back to the page, right-click the Layers panel and select Add Master Page Layer from the pop-up menu. 


Change a master page back into a normal page 


e Right-click the Pages panel, and choose Reset Master Page from the pop-up menu. 


Export selected pages To the top 


You can export multiple pages in a single step. Only the selected pages are exported. When you export pages, the optimization settings specified 
for the individual pages are used for exporting the files. 


1. In the Pages panel, select the pages that you want to export. 

2. Right-click, and select Export Selected Page(s). 

3. In the Export dialog box, select one of the options from the Export menu: 
Layers To Files Exports layers in the selected pages as individual files. 
States To Files Exports states in the selected pages as individual files. 


Pages To Files Exports selected pages as individual files. 


Customize filenames when exporting pages 


1. In the Pages panel, select the pages that you want to export. 
2. Right-click, and select Export Selected Page(s). 
3. In the Export dialog box, click Options. The Options button is enabled based on the selected option in the Export menu. 


4. In the Export Options dialog box, select Add Prefix, or Add Suffix, and select an option from the menu. You can name the files using any of 
the following options: 


doc.name The name of the source file is added as a prefix or suffix. For example, if you are exporting a page with the name Index from the 
source file sites. png using the Add Prefix option, a file with the name Sites_Index.gif is generated. 


Numerical (1, 2, 3...or 01, 02, 03...) The files are generated in a numerical sequence with the numbers being added to the prefix or suffix. 
All the exported page files are numbered in the order of their appearance in pages panel. When you are exporting many pages, use the 


double digit sequence. 


5. Use the options in the File Type menu to optimize the settings for the exported file. 


Export slices in selected pages 
Slices in the source file are ignored when exporting a file. To export the slices, use the following settings in the Export dialog. 


1. In the Export menu, select HTML and Images, or Images Only. 
2. Inthe HTML menu, select Export HTML File. 
3. In the Slices menu, select Export Slices. 
4. Select one of the following options: 
Selected Slices Only Areas that are marked as slices are exported. 


Include Areas Without Slices Areas that are not marked as slices are also exported. 
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A a To thet 
Multi-page preview oe 


Preview all pages, except the master page, when importing or opening files. The page selected during preview is brought to focus when the file is 
opened. 


When you insert a page containing objects from the master layer, the master page is converted to an ordinary layer, and imported. 


Enable multi-page preview 
Preview all the pages in a file when importing or opening it. The multi-page preview option is enabled by default in the Preferences dialog box. 


To enable multi-page preview for files created in previous versions, open them in the current version, and save them. 


1. In the Preferences dialog box, select General. 


2. Select Save Per Page Thumbnails to enable multi-page preview. If this option is disabled, page names are stored but thumbnails are not 
generated for those files. 


Preview pages before opening or importing them 
e In Windows, the preview is displayed in the Import or Open dialog box when you import or open a file. 


e In Mac, click Preview in the Open or Import dialog box. Alternatively, you can double-click the file in the Import dialog box to enter the 
Preview mode. 


When importing files, select Insert After Current Page to add imported pages after the page currently selected in the document. 


e Share layers 


(cc. Twitter™ and Facebook posts are not covered under the terms of Creative Commons. 
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Prototyping Flex and Adobe AIR applications 


Prototyping workflow 

Creating CSS-based layouts 
Prototyping Flex applications 
Prototyping Adobe AIR applications 


Prototyping workflow To the top 


By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and software prototypes. To convert a 
finalized prototype to a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®. 


See the following articles on Fireworks Developer Center for general tips on prototyping workflows: 
e Nick Myers’ article on designing interactive products with Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_en 
e Dave Cronin’s article on industry trends in prototyping: http://www.adobe.com/go/learn_fw_prototypingtrends_en 
e Matt Stow’s article on using prebuilt CSS templates in Fireworks: Prebuilt CSS templates in Fireworks CS4. 
e Jim Babbage’s article, Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling. 
e Dave Hogue’s video tutorials on using Fireworks for interaction design and rapid prototyping: 
e Using Fireworks for information and interaction design: hittp://www.adobe.com/go/learn_fw_infointeract_en 
e Creating interactive prototypes with Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_en 
e Rapid prototyping with Fireworks: http:/Mwww.adobe.com/go/learn_fw_rapidpro_en 
e Fireworks as part of the complete design process: http:/Awww.adobe.com/go/learn_fw_completedesignpro_en 
e Article on designing a website application with Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_en 
e Kumar Vivek’s article on designing for mobile devices using Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_en 
For a video tutorial on prototyping application interfaces, see www.adobe.com/go/|rvid4034_fw. 
Create the pages 


In the Pages panel, create the desired number of pages or screens for your initial design. As the design evolves, you can add or subtract pages 
as needed. 


Layout common design elements 


On the canvas, layout design elements that you want to share across multiple pages, such as navigation bars and background images. To align 
elements, use Smart Guides. For maximum flexibility, structure your layout with CSS. (See Smart Guides and Creating CSS-based layouts.). 


Share common elements across multiple pages 


When you share common elements, a single change automatically updates all affected pages. Use a master page to share all elements it contains, 
or share layers to copy subsets of elements. (See Use a master page and Share layers.) 


Add unique elements to individual pages 


On each page, add unique design, navigation, or form elements. In the Common Library panel, you'll find many buttons, text boxes, and pop-up 
menus that speed up the design process. Component symbols in the Flex Components, HTML, Mac, Win, Web & Application, and Menu Bars 
folders include properties that you can customize for individual symbol instances. (See Create and use component symbols.) 


Simulate user navigation with links 


From web objects such as slices, hotspots, or navigation buttons, link between the various pages of your prototype. (See Link to pages ina 
Fireworks document.) 


Export the finished, interactive prototype 

Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation. See the following articles: 
e To share a flexible CSS-based prototype with clients, or further edit it in Adobe Dreamweaver, see Export a CSS layout. 
e To create a more conventional table-based prototype, see Export Fireworks HTML. 


e To distribute a PDF version for comments or printing, see Export Adobe PDF files. 
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e To create a Flex application prototype, see Prototyping Flex applications. To create an Adobe AIR application, see Create an Adobe AIR 
application. 


Creating CSS-based layouts To the top 


You can design CSS-based layouts in a Fireworks document, and then convert them to HTML pages with CSS rules that replicate your layouts. 
CSS-based layouts provide a standards-based approach and give a cross-browser friendly code. 


For a video tutorial on creating CSS-based HTML page layouts, see www.adobe.com/go/Irvid4035_ fw. Also see the following resources: 
e Tutorial on exporting CSS and images in Fireworks at http://www.adobe.com/go/learn_fw_exportcssimages_en. 


e Tutorial on creating standards-compliant web designs with Fireworks at hittp://www.adobe.com/go/learn_fw_standardscompliantdesign_en. 


About CSS page layout 
Fireworks allows you to design pages and instantly export the HTML and CSS code by using an export engine that analyzes the placement of the 
objects. In addition, you can set the page alignment and specify a repeating background image. 


You can use the HTML elements available in the HTML folder in the Common Library. The HTML folder contains HTML elements such as button, 
drop-down list objects, and text fields. You can edit the properties of these elements using the Symbol Properties panel. When you drag any of the 
form elements to the page, the export engine inserts <form> tags while exporting the CSS-based layout. 


Any text on which you had placed a slice appear as images in the exported HTML. If you want this text to appear as text, use the HTML 
components from the Common Library. The HTML components include headings1-6 and link elements. 


Rules for CSS-based layouts 
You observe a few rules while creating CSS-based layouts to get expected results. 


Rule 1: Use rectangles to export text and slices to export images The export engine exports text placed in rectangles. Because only images 
which are covered by rectangular slices are exported, place slices on the images to have them exported. These slices “tell” the export engine 
where the images are. 


Rule 2: Avoid overlapping of objects The export engine treats text, images, and rectangles as rectangular blocks. It examines the size and 
position of these objects to determine the logical rows and columns to place them in the layout. Carefully place the objects so that their boundaries 
do not overlap. 


Rule 3: Plan the layout for rows and columns The export engine looks for logical partitions where a clear line of sight can be placed between 
objects or groups of objects. Enclose your column layouts in a rectangle to prevent the export engine from inserting a logical row that breaks the 
column layout. 


Rule 4: Treat the document as two-dimensional When you design your page, use rectangles to enclose objects that you want to treat as 
children of the rectangle. The export engine detects such parent-children relationships. The export engine scans the children elements for logical 
rows and columns as in Rule 3. 


In addition to these rules, observe the following: 
e The export engine exports only primitive rectangles. To export the rounded corners of rectangles, place rectangular slices over them. 
e To have the strokes of rectangles exported, place rectangular slices over rectangles that have them. 
e To export symbols, place a rectangular slice over them. 


e To export filters that you have applied to text or rectangles, place rectangular slices over them. 


Export a CSS layout 
Fireworks lets you export layouts you create as CSS-based files. You can then open and edit these CSS-based files in Dreamweaver or another 
CSS-compatible editor. 


1. Choose File > Export. 

2. From the Export pop-up menu, choose CSS And Images. 

3. Click Options to set the HTML page properties. 

4. Click Browse to specify a background image and set the background image tiling: 


e Select No Repeat to display the image only once. 
e Select Repeat to repeat, or tile, the image both horizontally and vertically. 


e Select Repeat-x to tile the image horizontally. 
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e Select the Repeat-y option to tile the image vertically. 
5. Select the page alignment on the browser as left, center, or right. 
6. Select the attachment scrolling as either fixed or scroll. 


7. Click OK, and then click Save. 


Create a document demo 
You can create a demo of the Fireworks document that you are working on. The demo opens in a browser to demonstrate the features and lets 
you navigate through the pages. 


1. Select Commands > Demo Current Document. 
2. Select the pages you want to create a demo for, and click Create Demo. 


3. Select the folder and click Open. 


Prototyping Flex applications ene 


The prototyping process for Flex is like the workflow used for websites and software interfaces. (See Prototyping workflow.) With Fireworks, you 
can drag Flex components onto the canvas, specify their properties, and export the resulting user interface to MXML. You can then refine such 
user interface in Flex Builder. 


Create Flex user interface 
Using the Pages panel, create the desired number of interface screens for your initial design. 
Insert Flex design components into the layout 


On the canvas, insert Flex components from the Flex folder in the Common Library panel. These component symbols work specifically with MXML 
export to ensure that you get the results you expect. When you export your document as MXML, each of these symbols is converted into their 
respective MXML tags. Objects that aren't recognized as Flex components instead get exported as bitmaps, which are linked to the MXML through 
an <mx:Image> tag. (See Create and use component symbols. 


Q When you edit a Flex design component in Fireworks, you can copy the modified XML code into your Flex project. This saves you time when 
you want to replicate the modified component behavior in your project. 


The Cursor, ScrollBar, Tab, and ToolTip symbols are ignored during an MXML output, as these components don’t have direct translation from 
Fireworks to MXML. For example, the ScrollBar symbol automatically appears in Flex container instances when their content can be scrolled. In 
Fireworks, these symbols simply serve as indicators as to how parts of an interface design function. 


Note: Image slices, rollovers, and hotspots apply only to HTML -based prototypes. Avoid these web objects when creating Flex prototypes. 
Share common Flex components across multiple pages 


When you share a single Flex component across multiple pages, a single change automatically updates all affected pages (or screens). You can 
use a master page to share all the Flex components it contains, or share layers to copy subsets of components. (See Use a master page and 
Share layers.) 


Specify properties for the Flex components 


In the Symbol Properties panel (Window > Symbol Properties), specify the properties and events for each Flex component you’ve inserted into the 
canvas. 


Export the Flex layout to MXML 


Export the Flex user interface layout, and open the resulting MXML file in Flex. Fireworks exports the necessary MXML with all styling and 
absolute positioning maintained. Flex developers can use this interface without having to re-create the layout in Flex. 


Edit Flex component properties 
You can edit the properties and events of Flex components in the Symbol Properties panel. 


1. Select the Flex component on the canvas. 
2. Open the Symbol Properties panel (Window > Symbol Properties). 


3. Set the properties and events of the component in the Symbol Properties panel. 


Export a Fireworks document to MXML 
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Fireworks can help you layout rich Internet applications (RIAs) by enabling the export of common library assets as known components for use in 
Adobe Flex Builder. Fireworks exports the necessary Flex code (MXML) with styling and absolute positioning maintained. 


When you finalize a Flex application prototype, export it to MXML for further editing in Flex Builder. In Design view, the prototype looks like its 
Fireworks counterpart, except for components such as cursors and scroll bars that are not exported. 

1. Choose File > Export. 

2. From the Export pop-up menu, choose MXML and Images. 

3. Select Put Images in Subfolder if you want to save the images in a separate folder from the MXML code. 


4. Select Current Page Only to export only the currently selected page. 


5. Click Save to complete the export. 


Any images associated with the prototype are exported to the images folder. Additionally, images of the full MXML pages are also created 
with the other image files. MXML pages don’t require these preview images and can be removed. 


Create and export Flex skins 
You can skin Flex components in Fireworks and then export them for use in building Flex-based websites and application interfaces. 


Skin Flex components 
You can create skins for a wide variety of Flex components based on the Flex skin templates and edit them in Fireworks. 


1. Select Commands > Flex Skinning > New Flex Skin. 
2. Do one of the following: 
e To create Flex skins for all available components, select Multiple Components. 
Fireworks creates a single document with all the available Flex components. 
e To specify the components you want to create skins for, select Specific Components. 
Select only the components with a specific style attached or select all instances of the component. 


3. Click OK. 


Export Flex skins 


1. Select Commands > Flex Skinning > Export Flex Skin. 


2. Select the folder to which you want to export the Fireworks document and click Open. 


MXML export limitations 
Before you use the Flex MXML export feature, it's important to know about its capabilities and limitations: 


MXML export does not skin components Exporting to MXML does not create skins for components in Flex, even if you've modified them in 
Fireworks. MXML export simply generates MXML documents for use in Flex. These documents can also include linked images for Fireworks 
objects that can’t be converted into MXML tags. These images are added to the MXML document via <mx:Image> tags. 


MXML export ignores slices Because MXML export is designed to generate a tag-based document for use with Flex, slices are not considered 
in creating images or table cells. When MXML export creates images, it uses the optimization settings of the document to determine the image 
format and compression method. 


MXML properties are limited to rich symbol properties The MXML export feature bases the properties of an MXML tag on the Flex component 
in Fireworks. Fireworks provides a subset of Flex components with a limited number of properties. 


Styles are embedded Properties recognized as styles are separated from the MXML tags created, but are kept within the same MXML document 
inside a <mx:Style> tag. Fireworks cannot define the styles in an external CSS file. 


Frames are not supported When creating designs and layouts for MXML output, do not use frames. If you want to have different designs in one 
document, use pages. 


Prototyping Adobe AIR applications eer 


Adobe® AIR™ for Fireworks lets you transform a Fireworks prototype into a desktop application. For example, some prototype pages interact with 
each other to display data. You can use Adobe AIR to package this set of pages into a small application that can be installed on a user's computer. 
When user runs the application from their desktop, the application loads and displays the prototype in its own application window, independent of a 
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browser. Users can then browse the prototype locally on their computers without an Internet connection. 


See Ethan Eismann’s article on Adobe AIR and the experience brand: http:/Mwww.adobe.com/go/learn_fw_airexperiencebrand_en. 


Add Adobe AIR mouse events 


You can add predefined Adobe AIR mouse events to objects in your document. Fireworks provides four predefined mouse events: close window, 
drag window, maximize window, and minimize window. 


1. Select the objects on the canvas to which you want to apply mouse event behavior. 


2. Select Commands > AIR Mouse Events and choose the event. 


Preview an Adobe AIR application 
You can preview an Adobe AIR application without setting any Adobe AIR application parameters. 


e Select Commands > Create AIR Package, and click Preview. 


Create an Adobe AIR application 


e Select Commands > Create AIR Package, and set the following options: 


Application Name Specify the name that appears on installation screens when users install the application. The extension specifies the 
name of the Fireworks site by default. 


Application ID Enter a unique ID for your application. Do not use spaces or special characters in the ID. The only valid characters are 0-9, 
a-z, A-Z, . (dot), and - (dash). This setting is required. 


Version Specify a version number for your application. This setting is required. 


Program Menu Folder Specify the folder in the Windows Start Menu where you want the shortcut to the application created. (Not applicable 
on Mac OS) 


Description Add a description of the application to display when a user installs the application. 


Copyright Specify the copyright notice that is displayed in the About information for Adobe AIR applications installed on Mac OS. This 
information is not used for applications installed on Windows. 


Package Content Select Current Document to automatically select the folder from which the files are included. 


Root Content Click Browse to elect the page that appears as the root content. If you had selected Current Document, the root content is 
automatically set. 


Included Files Specify the files or folders to include in your application. You can add HTML and CSS files, image files, and JavaScript 

library files. Click the Plus (+) button to add files, and Folder icon to add folders. To delete a file or folder from your list, select the file or 

folder and click the Minus (-) button. The files or folders you select to include in the Adobe AIR package must belong to the root content 
folder. 


System Chrome and Transparent Specify the window style (or chrome) to use when users run the application on their computers. System 
chrome surrounds the application with the standard window control of the operating system. Transparent chrome eliminates the standard 
system chrome and lets you create a chrome of your own for the application. The transparent capabilities let you create application windows 
that are not rectangular in shape. 


Width and Height Specify the dimensions of your application window in pixels when it opens. 


Select Icon Images Click to select custom images for application icons. Select the folder for each icon size and select the image file you 
want to use. Only PNG files are supported for application icon images. 


Note: Selected custom images must reside in the application site, and their paths must be relative to the site root. 


Digital Signature Click Set to sign your application with a digital signature. This setting is required. For more information, see the section 
that follows. 


Package File Specify the folder to save the new application installer (.air file). The default location is the site root. Click the Browse button to 
select a different location. The default filename is based on the site name with an .air extension. This setting is required. 


Sign an Adobe AIR application with a digital certificate 
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A digital signature provides an assurance that the code for an application has not been altered or corrupted since its creation by the software 
author. All Adobe AIR applications require a digital signature, and can't be installed without one. 


1. In the Create AIR Package dialog box, click the Set button next to the Digital Signature option. 
2. In the Digital Signature dialog box, do one of the following: 


e To sign an application with a pre-purchased digital certificate, click the Browse button, select the certificate, enter the corresponding 
password, and click OK. 


e To create your own self-signed digital certificate, click the Create button and complete the dialog box. The certificate Key Type option 
refers to the level of security of the certificate: 1024-RSA uses a 1024-bit key (less secure), and 2048-RSA uses a 2048-bit key (more 
secure). When you're finished, click Create. Then enter the corresponding password in the Digital Signature dialog box and click OK. 


Note: You must have Java® Runtime Environment (JRE) installed in your computer. 


(ec Twitter™ and Facebook posts are not covered under the terms of Creative Commons. 
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Creating animations 
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Animation symbols 


Create animation symbols 
Edit animation symbols 


A è To the to 
Create animation symbols p 


You can create an animation symbol from scratch or by converting an object to a symbol. You can then set properties that determine the number 
of states in the animation and the type of action, such as scaling or rotation. By default, a new animation symbol has five states, each with a delay 
time of 0.07 seconds. 


For information on using states for animation, see David Hogue’s article http://www.adobe.com/go/learn_fw_pagestatelay_en. 


Create an animation symbol 
1. Select Edit > Insert > New Symbol. 
2. In the Convert To Symbol dialog box, enter a name for the new symbol. 
3. Select Animation, and click OK. 
4. In the Document panel, use the drawing or text tools to create an object. You can draw vector or bitmap objects. 
5. When you finish editing the symbol, switch to the overall page. (see Switch from symbol editing to page editing.) 
Fireworks places the symbol in the Document Library and a copy in the center of the page. 


You can add new states to the symbol using the States slider in the Property Inspector. Select Window > Properties to open the Property 
Inspector, if its not already open. 


Convert an object to an animation symbol 
1. Select the object. 
2. Select Modify > Animation > Animate Selection. 
3. Edit the symbol by setting animation properties. 


Animation controls appear on the bounding box of the object, and a copy of the symbol is added to the library. 


P F A To the to 
Edit animation symbols 4 
You can change a variety of symbol properties, such as animation opacity and rotation. You can make a symbol appear to rotate, speed up, fade 
in and out, or any combination of these properties. 


A key property is number of states. When you set this property, Fireworks automatically adds to the document the number of states required to 
complete the action. If the symbol requires more states than currently exist in the animation, Fireworks asks whether to add extra states. 


You change animation properties using either the Animate dialog box or the Property Inspector. 


Q To adjust animation speed, see Set state duration. To edit text, graphics, strokes, fills, or effects, see Edit a symbol and all of its instances and 
Edit specific symbol instances. 


Animation symbol properties 

States The number of states in the animation. You can specify up to 250 with the slider or enter any number in the States box. The default is 5. 
Move (Animate dialog box only) The distance, in pixels, that the object moves. The default is 72, but it has no limit. Movement is linear, and there 
are no key states (unlike in Flash and Adobe Director). 

Direction (Animate dialog box only) The direction, in degrees from 0 to 360°, in which the object moves. You can also change Movement and 
Direction values by dragging the animation handles of the object. 

Scaling The change in symbol size, as a percentage, from start to finish. The default is 100%, but it has no limit. To scale an object from 0% to 
100%, the original object must be small; vector objects are recommended. 

Opacity The degree of fade in or out from start to finish. Values range from O to 100, and the default is 100%. Creating a fade in/fade out requires 
two instances of the same symbol — one to play the fade in, and the other to play the fade out. 

Rotation The degree of rotation from start to finish. Values range from O to 360°. You can enter higher values for more than one rotation. The 
default is 0°. 
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CW and CCW The direction in which the object rotates, either clockwise (CW) or counterclockwise (CCW). 


Change animation symbol properties 
1. Select an animation symbol. 


2. Select Modify > Animation > Settings to open the Animate dialog box. Select Window > Properties to open the Property Inspector if it is not 
already open. 


3. Change the properties. 


4. If you're using the Animate dialog box, click OK to accept the changed properties. 


Remove animations 
You can remove animations either by deleting the animation symbol from the library or by removing the animation from the symbol. 


Remove the animation from a selected animation symbol 
& Select Modify > Animation > Remove Animation. 


The symbol becomes a graphic symbol and is no longer animated. If you later reconvert the symbol to an animation symbol, it retains its previous 
animation settings. 


Remove a symbol from the document library 
1. In the Document Library panel, select the animation symbol. 


2. Drag the symbol to the trash can icon in the lower right corner. 


Change the movement or direction of a symbol 
A selected animation symbol has a unique bounding box and a motion path indicating the direction in which the symbol moves. 


The green dot on the motion path indicates the starting point, and the red dot shows the end point. The blue points on the path represent states. 
For example, a symbol with five states has one green dot, three blue dots, and one red dot on its path. If the object appears at the third dot, State 
3 is the current state. 

You can change the direction of the motion by changing the angle of the path. 


** Drag one of the animation start or end handles of the object to a new location. Shift-drag to constrain the direction of movement to 45° 
increments. 


More Help topics 
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Animations 


Animation basics 

Preview an animation 

Optimize an animation 

Work with existing animations 
Create twist and fade animations 


x a a To thet 
Animation basics o the top 


In Adobe® Fireworks®, you can create animated graphics with banner ads, logos, and cartoons that move. You create animation by assigning 
properties to objects called animation symbols. The animation of a symbol is broken down into states, which contain the images and objects in the 
animation. You can have more than one symbol in an animation, and each symbol can have a different action. Different symbols can contain 
differing numbers of states. The animation ends when all the action of all the symbols is complete. 


You can apply settings to the symbol to gradually change the content of successive states. You can make a symbol appear to move across the 
canvas, fade in or out, get bigger or smaller, or rotate. Because you can have multiple symbols in a single file, you can create a complex animation 
in which different types of action occur all at once. 


You change optimization and export settings in the Optimize panel to control how your file is created. Fireworks can export animations as animated 
GIF or Adobe Flash® SWF files. You can also import Fireworks animations directly into Flash for further editing. 


Zsolt Szekely’s article in the Adobe Dev Center provides useful information on creating animated logos 
www.adobe.com/go/learn_fw_creatinganimlogos_en. 


Animation workflow 
1. Create an animation symbol, either from scratch or by converting an existing object into a symbol (see Create animation symbols.) 


2. Edit the animation symbol in the Property Inspector or the Animate dialog box. You can set the degree and direction of movement, scaling, 
opacity (fade in or out), and angle and direction of rotation (see Edit animation symbols.) 


Note: Degree and direction of movement options are found only in the Animate dialog box. 
3. Use the States Delay controls in the States panel to set the animation speed. (see Set state duration.) 
4. Optimize the document as an animated GIF. (see Optimize an animation.) 


5. Export the document as an Animated GIF or SWF file, or save it as a Fireworks PNG and import it into Flash for further editing. (See Export 
an animation.) 


About animation symbols 

Animation symbols are the actors in your animation. An animation symbol can be any object you create or import, and you can have many 
symbols in one file. Each symbol has its own properties and behaves independently, so you can create symbols that move across the screen while 
others fade or shrink. 


You do not need symbols for every aspect of your animation. However, using symbols and instances for graphics that appear in multiple states 
reduces file size. 


You can change animation symbol properties at any time using the Animate dialog box or the Property Inspector. You can also edit symbol artwork 
without affecting the rest of the document. You can also change the motion of a symbol by moving its motion path. 


Because animation symbols are automatically placed in the library, you can reuse them to create other animations. 


. . $ To the top 
Preview an animation 


You can preview an animation while you are working on it to check its progress. You can also preview an animation after optimization to see how it 
appears in a web browser. Previewing animations in 2-Up or 4-Up view is not recommended. 


Note: Animations added to master pages are not displayed. Add animations to child pages and share them across all pages. 


Preview an animation in the workspace 
“* Use the state controls that appear at the bottom of the Document window. 


> M 1 I> 


195 


State controls 


e To set how long each state appears in the document window, enter state delay settings in the States panel. 
e Hidden states excluded from export do not appear in the preview. (see Hide states during playback.) 


e Previewing the animation in the Original view displays the full resolution source graphic, not the optimized preview used for the exported file. 


Preview an animation in Preview view 
1. Click the Preview button at the upper left of the Document window. 


2. Use the state controls. 


Preview an animation in a web browser 
* Select File > Preview in Browser, and select a browser from the submenu. 


Note: To see motion when you preview the animation, select Animated GIF as the Export file format in the Optimize panel, even if you plan to 
import the animation into Flash as a SWF file or Fireworks PNG file. 


a P n To the to 
Optimize an animation p 


After you set up the symbols and states that make up an animation, optimize the animation to make it load easily and play smoothly. 


Q After you create and optimize an animation, it is ready to export. For details, see Export an animation. 


Set the animation to repeat by looping 
By causing an animation to repeat, Looping minimizes the number of states required to build the animation. 


1. Select Window > States to display the States panel. 
2. Click the GIF Animation Looping button È at the bottom of the panel. 
3. Select the number of times to repeat the animation after the first time. 


If you select 4, for example, the animation plays five times in all. Forever repeats the animation continuously. 


Select settings from the Optimize panel 


Optimization compresses a file into the smallest package, making web downloading time much quicker. For more information on optimizing 
options, see Optimize GIF, PNG, TIFF, BMP, and PICT files. 


1. Select Window > Optimize. 
. Select the export file format in the Optimize panel. 
. Set the Palette and Dither options. 


2 
3 
4. From the Transparency pop-up menu in the Optimize panel, select either Index Transparency or Alpha Transparency. 
5. Use the transparency tools in the Optimize panel to select colors for transparency. 

6 


. In the States panel, set the state delay. 


š P A A To thet 
Work with existing animations R 


You can use an existing animated GIF by importing the GIF into a Fireworks file or by opening the GIF as a new file. 


When you import an animated GIF, Fireworks converts it to an animation symbol and places it in the currently selected state. If the animation has 
more states than the current movie does, you can choose to automatically add more states. 


Imported GIFs assume the state delay settings of the current document. Because the imported file is an animation symbol, you can apply 
additional motion to it. For example, import an animation of a person walking in place and then apply direction and motion properties to have the 
person walk across the screen. 


When you open an animated GIF in Fireworks, a new file is created and each state in the GIF is placed in a separate state. Although the GIF is 
not an animation symbol, it does retain all the state delay settings from the original file. 


Animations added to master pages are not displayed. Add the animation to a child page, and share it across all pages. 


After the file is imported, you set its file format to Animated GIF to export the motion from Fireworks. 


Import an animated GIF 


1. Select File > Import. 
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2. Locate the file and click Open. 


3. Click and drag to place the file on to the canvas. 


Open an animated GIF 
& Select File > Open and locate the GIF file. 


Use multiple files as one animation 
Fireworks can create an animation based on a group of image files. For example, you can create a banner ad based on several existing graphics. 


1. Select File > Open. 
2. Shift-click to select multiple files. 
3. Select Open as Animation and click OK. 


Fireworks opens the files in a new single document, placing each file in a separate state in the order in which you selected it. 


4 m = To the t 
Create twist and fade animations ee 


You can use the Twist and Fade command to create multiple instances of an object that fade in or fade out along a twisted path. After you create 
the first object, the later instances are created automatically according to the options you set in the Twist and Fade dialog. You can also animate 
the created objects using the option in the dialog, and save the animation as a GIF file. 


1. Create or place an object on the canvas. For example, draw a circle, or place an image on the canvas. 
2. Select Commands > Creative > Twist and Fade. 


3. In the Twist And Fade dialog box, configure the parameters according to your preferences. Manipulate the various options in the dialog box 
to customize the effect. Position the dialog box such that you preview the changes as you make them. 


Steps The number of instances of the object that is created. 

Opacity The opacity of the objects that are created. 

Direction The direction in which the successive objects are created with respect to the first object. 

Step Behind Every object moves behind the next object in the set. 

Animate Select this option if you want to animate the set of objects that you have created. 

Blur As you increase the value in this field, the blur effect is applied starting from the last object created to the first object. 
Hue Shift Change the value to change the colors of the created objects. 

Spacing Increasing the value increases the space between the created objects. 

Rotation The extent to which the successive objects are rotated. 

Direction The angle at which the succeeding objects align themselves to the first object. 

Scale The scalability of the succeeding objects with respect to the first object. 

Opacity The opacity of the succeeding objects with respect to the first object. 

Randomize Click Randomize if you want to experiment with a random set of values chosen by the system. 
Jitter Adds variations to the option you have selected. The value you set determines the amount of variation. 


Presets Select a preset that best suits your needs. It is a good idea to start with a preset, and configure the various options according to 
your requirement. You can also select Default to use the default set of preferences, or select Last Used to use your previous set of 
preferences. 


Preview Select preview if you want to view the changes to the object as soon as you set options in the dialog box. 

Note: Ifyou have selected the Animate option, the graphic disappears from the workspace after you click the OK button. 
4. In the Properties dialog box, select Animated GIF Websnap 128 from the Format Options menu. 
5. Press F12 to preview the animation in a browser. 


Note: You can ungroup the created objects in the same way as you ungroup objects. 
More Help topics 
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States 


States and layers 

States and master pages 

Creating prototype/demo page with both buttons and animations 
Set state duration 

Hide states during playback 

Change state names 

Customize names of states 

Manipulate states 


For a history of how the concept of pages was introduced into Fireworks, see Sarthak's article 
www.adobe.com/go/learn_fw_simplifyingpagesstates_en. What we know as states now was referred to as Frames in versions previous to 
Fireworks CS4. 


You build animations by creating states, whose contents appear in the States panel. There, you can name the states, reorganize them, manually 
set the timing of the animation, and move objects from one state to another. 


Each state also has associated properties. By setting the state delay or hiding a state, you can see how your animation looks as you edit it. 


You can use layers in animations to organize objects that are part of the scenery or backdrop for the animation. To make objects appear 
throughout an animation, place them on a layer and then use the Layers panel to share the layer across states. Objects in a layer shared across 
states are visible in every state. For more information, see Share layers. 


To the to 
States and layers i 
Pages contain states, and states contain layers. A new page contains only one state. All the layers you create and all of the objects on those 
layers have only one state. To understand the relationship between states, pages, and layers, see David Hogue's article 
www.adobe.com/go/learn_fw_usingpagesstates_en. 


When you create a state from the States panel, the new state has the same number of layers as the previous state. However, the layers are 
empty and do not contain objects from the previous state. To duplicate objects across states, create a duplicate state instead of creating a state. 
Each instance of an object is independent across states when they are duplicated. 


Note: Deleting a layer from any of the states deletes the layer from all the states. 

To share objects in a Layer across states, right-click the layer, and select Share Layer To States. Objects in the layer are shared across states 
and also to new states when they are created. All objects on the corresponding layer in other states are deleted and replaced with objects from the 
shared layer. Any modification to objects in the shared layer is reflected across states. 


To the to 
States and master pages p 
The states of a master page correspond directly to the states of other pages in your document. When you duplicate state 1 on regular page A, it 
copies all objects from Page A state 1 to Page A state 2, and it shares Master Page State 2. Because the master page only has one state, state 2 
on any other page is blank. 


If you duplicate state 1 to create state 2 in a master page, the background layer on the master page is also duplicated to state 2 of the master 
page. State 2 of the master page is shared with state 2 of all pages in your document. 


In summary, state 1 of the master page shares to state of 1 all pages, state 2 of the master page shares to state 2 of all pages, and so on. If a 
regular page has more states than the master page, nothing is shared to those states from the master page until that state is created on the 
master page. 


Creating prototype/demo page with both buttons and animations Teme tap 


Fireworks documents containing both buttons and animations are most times not displayed as intended. Fireworks assumes that animations are 
the entire page, whereas buttons assume that you are only swapping images below that slice. When the animation plays, it changes everything on 
the page — including the button states. 


Animations and buttons must be created and exported separately into a web page. Rollover buttons use JavaScript to display the different states, 
but animations from Fireworks are exported as GIFs or SWFs, which are self-contained. 


To the top 
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Set state duration 


The state delay specifies how long the current state is displayed, in hundredths of a second. For example, specify 50 to display the state for half a 
second or 300 to display it for 3 seconds. 


1. Select one or more states: 

e To select a contiguous range of states, Shift-click the first and last state names. 

e To select a noncontiguous range of states, hold down Control (Windows) or Command (Mac OS) and click each state name. 
2. Do one of the following: 

e Select Properties from the States panel Options menu. 

e Double-click the State Delay column. 
3. Enter a value for the state delay. 


4. Press Enter, or click outside the panel. 


Hide states during playback To the top 


Hidden states are not displayed during playback and are not exported. 
1. Do one of the following: 
e Select Properties from the States panel Options menu. 
e Double-click the State Delay column. 
2. Deselect Include When Exporting. 


3. Press Enter or click outside the panel. 


To thet 
Change state names o the top 


As you set up an animation, Fireworks creates the necessary states and displays them in the States panel as State 1, State 2, and so on. When 
you move a State in the panel, Fireworks renames each one to reflect the new order. 


Give your states meaningful names to keep track of them. Moving a renamed state has no effect on the name. 
1. In the States panel, double-click the name. 


2. Type anew name and press Enter. 


. To the to 
Customize names of states K 


1. Select File > HTML Setup. 

2. In the HTML setup dialog, select the Document Specific tab. 

3. Select Custom in the State Names menu. 

4. In the dialog that comes up, define the custom names for the states. 


The custom name is remembered throughout the session. Because it is a document specific setting, select ‘Custom’ as indicated in the first screen 
shot. 


To the top 


Manipulate states 


You can add, copy, delete, and change the order of states in the States panel. 


Add a new state 
& Click the New/Duplicate State button & at the bottom of the States panel. 


Add states to a sequence 
1. Select Add States from the States panel Options menu. 
2. Enter the number of states to add. 


3. Select where to insert the states and click OK. 
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Copy a state 
“* Drag an existing state to the New/Duplicate State button at the bottom of the States panel. 


Copy a selected state and place it in a sequence 
Duplicating a state is useful when you want objects to reappear in another part of the animation. 


1. Select Duplicate State from the States panel Options menu. 


2. Enter the number of duplicates to create for the selected state, specify where to insert the duplicate states, and click OK. 


Reorder states 
** Drag the states one by one to a new location in the list. 


Reverse the order of states 
You can reverse the order of all states or a selected range. 


1. Select Commands > Document > Reverse States. 
2. Do one of the following: 
e Select All States to reverse the sequence of states start to end. 
e Select Range Of States and then choose the start and end states to reverse the order of a range of states. 


3. Click OK. 


Delete the selected state 
** Do one of the following: 


e Click the Delete State button # in the States panel. 
e Drag the state to the Delete State button. 


e Select Delete State from the States panel Options menu. 


Move selected objects in the States panel 
You can use the States panel to move objects to a different state. Objects that appear in only a single state vanish as the animation plays; you can 
make them disappear and reappear at different points. 


In the States panel, a small circle to the right of the state delay time indicates the status of objects on that state. 
1. On the canvas, select the objects you want to appear on another state. 
2. In the States panel, drag the selection indicator (the small black circle at the right of the state delay time) to the new state. 


Q9 To copy selected objects to other states, Alt-drag them (Windows) or Option-drag them (Mac OS). 


View objects in a state 
“* Select the state from the State pop-up menu at the bottom of the Layers panel. 
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All objects in the selected state are listed in the Layers panel and displayed on the canvas. 


More Help topics 
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Tweening and onion skinning 


Tweening 
Onion skinning 


š To the to 
Tweening p 


In Fireworks, tweening is a manual process that blends two or more instances of the same symbol, creating interim instances with interpolated 
attributes. Use tweening to create sophisticated movement of an object across the canvas and for objects whose Live Filters change in each state 
of the animation. For example, you can tween an object so that it seems to move along a linear path. 


Note: In most cases, using animation symbols is preferable to tweening. for more information, see About animation symbols. 


Tween instances 
1. Select two or more instances of the same graphic symbol on the canvas. Do not select instances of different symbols. 
2. Select Modify > Symbol > Tween Instances. 
3. Enter the number of tween steps you want to insert between the original pair in the Tween Instances dialog box. 
4. To distribute the tweened objects to separate states, select Distribute To States and click OK. 


You can do this later by selecting all instances and clicking the Distribute To States button *H in the States panel. 


z P P To the to 
Onion skinning p 


Onion skinning is a technique for viewing the contents of states before and after the selected state. You can smoothly animate objects without 
flipping back and forth through them. 


When you turn on onion skinning, objects in the preceding and subsequent states are dimmed so that you can distinguish them from objects in the 
current state. 


By default, Multi-State Editing is enabled so that you can select and edit dimmed objects in other states without leaving the current state. Use the 
Select Behind tool to select objects in states in sequential order. 


You can adjust the number of states visible before and after the current one by clicking the Onion Skinning button and selecting a display option. 
The Custom option allows you to specify the number of states and to control opacity. Use the Multi-State Editing option to select and edit all visible 
objects. Deselect to edit in the current page only. 


More Help topics 
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Creating slide shows 
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Slide shows 


Build and arrange a slide show 
Customize a slide show 
Create a custom Fireworks album player 


a n To thet 
Build and arrange a slide show eee 


To create Adobe® Flash® or HTML/SPRY-based slide shows, use the Create Slideshow window to select a folder with images and add slide show 
options. Edit slide shows by adding or deleting images, or by adding multiple albums to a single slide show. 


If you are a Flash designer or developer, you can build a custom album player in Flash to display the Adobe Fireworks® Album Creator's XML 
output. 


Create a slide show 
1. Select Commands > Create Slideshow. 
. Click the Add An Album button (the plus sign) next to Albums. 
. Choose the image files to include in the slide show and click OK. 
. Fill in the AlbumBook Properties and the Album Properties. 
. Select each of the panels on the right to configure the slide show properties. 
. Choose the location for the completed slide show in the Export Options panel. 
. After configuring all of the slide show settings, click Create. 


MN DA KR UDN 


. (Optional) To display the slide show in your browser, select the Launch Slideshow In Browser option, and then click Done. 


Open an existing slide show 
1. Select Commands > Create Slideshow. 
2. In the Create Slideshow window, click Open An Existing Slideshow or the Browse button (...) next to Albums. 


3. Browse to the folder that contains the existing slide show XML file and click Open. 


Delete an album 
1. Open an existing slide show. 


2. Select an album in the Albums lists, and then click the Delete Selected Album(s) button (the minus sign) next to Albums. 


Arrange an album 
1. Open an existing slide show. 
2. Select an album in the Albums list. 


e To add images, click the Add Image(s) button (the plus sign) next to Images. Then click the Browse button (...) and select one or multiple 
images. 


e To change the order of images, select an image, and then click the arrow buttons at the top of the image list to move it. 


, 5 To the to 
Customize a slide show R 


Click each property panel on the right side of the Create Slideshow window to show the panel and customize the properties. 


AlbumBook Properties panel 
AlbumBook properties apply to an AlbumBook, which can contain multiple albums. 


Title Can contain whitespace, for example, “My Journey.” 
Description Enter a description. 
Player Select the type. 
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Info icon (next to Player) Click to see additional information about the player, including the album and AlbumBook properties that the selected 
player type supports. 

Auto-Start Slideshow Start the slide show when the player opens. 

Allow Clicking Images Lets the user click the image to open it in a new browser window and save the image, view in new tab, or view as full- 
sized. 


Album Properties panel 
Album properties apply only to the individual, selected album. 


Description Enter a description for the album. 
Thumbnail Select an image for a thumbnail preview in the slide show. 
Background Select and scale a custom background image for the slide show. 


Captions panel 
Use the Captions options to customize the slide show image captions. 


Apply To All Albums Apply the caption options to all albums in the AlbumBook. 

No Change Keep the existing captions. 

Clear All Captions Clear all captions from the album. 

Use File Name Use the filenames of images as the caption. 

Include Extension If you choose to have filenames as captions, include filename extensions. 
Insert Text Use the specified text as the caption for every image. 

Replace Captions Apply the text you inserted to all images. 


Filters panel 
You can apply filters to a new album only. To apply selected filters to all albums in the AlbumBook, select Apply To All Albums. 


Slideshow Properties panel 
Slideshow properties apply to the currently selected slide show. 


Apply To All Albums Apply the specified options to all albums in the AlbumBook. 

Interval Number of seconds between each image. 

Use Transition Select a specified transition effect between images. 

First Image Set the first image in the album. This is the sequence number of the image in the album. 
Display Sequence Choose whether to display images in order or randomly. 


Export Options panel 
Use these options to set up the export of the images. 


Export images Export the full-sized and thumbnail images with the specified settings. Deselect to export only the XML file. 

Generate XML Generate a slideshow.xml file for the slide show images and directories. Deselect to export only the images. 

XML Format Select the XML format exported as Create Slideshow or Adobe Media Gallery if you select Generate XML. 

Export path Location where the slide show and associated files are exported or generated. 

Width and Height Width and height of the exported full-sized images. Scaled images keep their original aspect ratios. 

Export Thumbnails Export the thumbnails along with the full-sized images. 

Width and Height Width and height of the exported thumbnail images. 

Image Quality Specify the output quality of the exported full-sized and thumbnail images. A setting of 100 indicates the best possible quality. 
Enlarge Images To Fit If necessary, enlarge images to match the specified export size. 
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Create a custom Fireworks album player 


You can create a custom player to work with the Create Slideshow command. In addition, the source files of the default slide show players are 
included with the software so that you can modify or skin the players. 


1. Publish both the SWF and (if available) the HTML file (with either the .htm or .html extension). 
2. Change the extension of the SWF to something other than .swf. 


Note: On Mac OS, renaming the SWF file in Finder may not work (unless you have set the Show File Extensions option). You may have to 
rename it using the file's properties dialog box, under Name & Extension. 


3. In the same folder as the SWF file, create an XML file that has the following format: 
<?xml version="1.0"encoding="utf -8"?> 


<FWACPlayer> 
<Player name="Player - Black (Flash)"preview="player_black.jpg"launch="index.htm1"> 
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<File src="player_black.fap"dst="player_black.swf"/> 
<File src="player_black.html"dst="index.htm1"/> 
<Info src="player_black.info"/> 

</Player> 

<Player name="Player - White (Flash)"preview="player_white. jpg"launch="index.htm1"> 
<File src="player_white.fap"dst="player_white.swf"/> 
<File src="player_white.html"dst="index.htm1"/> 
<Info src="player_white.info"/> 

</Player> 

</FWACPlayer> 


Note: If you have multiple versions of the same basic player, you can list them in the XML (as shown earlier). 
4. For each Player node, list the source and destination filenames inside the File node. 


5. (Optional) To provide additional information for the player, add the Info node, with the src attribute containing the name of the file. The info 
file must contain HTML text. If the file contains simple non-HTML text, line feeds, carriage returns, and tabs are removed before displaying 
the text. 


6. Create or edit the MXI file so that the renamed SWF and HTML get placed in a Configurations/Commands/Players folder. 
Note: For the Launch Slideshow In Browser option to work at the end of a process, the SWF and HTML files must have the same name. 


The generated XML file has the following structure: 


<AlbumBook... > 


AMID UM ee 
<Si Hiden 
<Silsioly mE Y= 
ZSIS goa V> 
</Album> 
<Album ... > 
<Siiid eae 
<S ki em e/ > 
<slide m> 
</Album> 
</AlbumBook> 


Node definitions 


AlbumBook node 

ver Version of the Create Slideshow command that generated the XML file. 

title Main title of the slide show. 

description Description for the entire slide show. 

firstAlbum Zero-based index of the first album you want to display. 

width Width of the slide show. 

height Height of the slide show. 

showThumbnails Whether to show thumbnails. Or, whether thumbnails were exported. 
thumbWidth Width of the thumbnail. 

thumbHeight Height of the thumbnail. 

autoStart Starts the slide show automatically. 

allowClick Whether to allow users to click the images. 

clickAction The action to take when an image is clicked (open in new window, new tab, or let the player decide). 


Album node 

title Title of this particular album. 

description Description for the album. 

path Name of the folder that contains the images for this album. Thumbnails are exported in the Thumbs folder inside the path. 
hasThumb Has thumbnail. 

thumbSrc Album thumbnail image. 

hasBg Has background image. 

bgSrc Album background image. 

bgScale Scaling method for the album background. 

interval Slide show interval in seconds for this album. 
useTransition Use transition when switching between images. 
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transType Slide show transition for this album. 

transTime Transition time. 

firstlmage Zero-based index of the first image to display. 
dispSequence Order in which to display images (Sequential or random). 


Slide node 

src Name of image file for this slide. 
caption Caption associated with this slide. 
width Width of the slide. 

height Height of the slide. 

thumbWidth Width of the slide thumbnail. 
thumbHeight Height of the slide thumbnail. 


O 
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Optimizing and exporting 


Export from the workspace 


Export pages as image files 

Export a single image 

Export a sliced document 

Export an animation 

Export states or layers as multiple files 
Export an area from a document 
Export HTML 

Export Adobe PDF files 

Export FXG files 


After a graphic or document has been optimized, you can export it (or save it, depending on its originating file type). 


You can export (or in some cases, save) a document as a single image in GIF, JPEG, or another graphic file format. You can also export the entire 
document as an HTML file and associated image files, only selected slices, or a specified area. In addition, you can export Fireworks states and 
layers as separate image files. 


The default location to which Fireworks exports files is determined by the following, in this order: 
1. The current export preference of the document, which is defined if you've ever exported the document and then saved the PNG 


2. The current export/save location, which is defined anytime you browse away from the default location presented in a Save, Save As, or 
Export dialog box 


3. The location of the current file 


4. The default location where new documents or images are saved on your operating system 


In contrast, the default location where Fireworks saves a document is determined by a different set of criteria. For more information, see 
Saving Fireworks files. 


Export pages as image files bie 


1. Select File > Export. 
2. Choose the location for the export files. 
3. Do one of the following: 


e Select Images Only from the Export pop-up menu, and select or deselect the Current Page Only check box. The pages are exported to 
the image format set on the Optimize panel. 


e Select Pages To Files in the Export pop-up menu, and select Images in the Export As pop-up menu. The pages are exported to the 
image format set on the Optimize panel 


e Select Pages to Files in the Export pop-up menu, and select Fireworks PNG in the Export As pop-up menu. Each page is exported asa 
separate PNG file that is backward compatible with Fireworks 8. 


Note: If you want to export all the pages in the selected format, select all the pages, and then optimize the settings. 


n a To thet 
Export a single image ii 


If you are working with an existing image that you opened in Fireworks, you can save it rather than export it. For more information, see Save 
documents in other formats. 


Note: To export only certain images in a document, you must first slice your document and then export only the desired slices. 
1. In the Optimize panel, select a file format and set format-specific options. 


2. Select File > Export. 
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Export a sliced document 


Select a location to export the image file to. 


For web graphics, the best location is typically a folder within your local website. 
Enter a filename with no extension. An extension is added during export based on the file type. 
From the Export pop-up menu, select Images Only. 


Click Save. 


To the top 


By default, when you export a sliced Fireworks document, an HTML file and associated images are exported. The exported HTML file can be 
viewed in a web browser or imported into other applications for further editing. 


Before export, be sure you have the appropriate HTML style selected in the HTML Setup dialog box. See Set HTML export options. 


Export all slices 


1; 


2. 


Select File > Export. 

Navigate to a folder on your hard drive in which to export. 

From the Export pop-up menu, select HTML and Images. 

Type a filename in the File Name box (Windows) or Save As box (Mac OS). 
From the HTML pop-up menu, select Export HTML File. 

From the Slices pop-up menu, select Export Slices. 

(Optional) Select Put Images In Subfolder. 


Click Save. 


Export selected slices 


1: 


Shift-click to select multiple slices. 

Select File > Export. 

Select a location in which to store the exported files, such as a folder within your local website. 
From the Export pop-up menu, select HTML and Images. 


Enter a filename with no extension. An extension is added during export based on the file type. 


If you are exporting multiple slices, Fireworks uses the name you enter as the root name for all exported graphics, excluding those you have 
custom-named using the Layers panel or the Property inspector. 


From the Slices pop-up menu, select Export Slices. 


To export only the slices you selected before export, choose Selected Slices Only, and ensure that the Include Areas Without Slices option 
is not selected. 


Click Save. 


Update a slice 
If you've already exported a sliced document and have subsequently made changes to the original document in Fireworks, you can update just the 
image or slice that changed. To make it easy to locate the replacement slice, custom-name slices. 


1, 


2: 


3. 


Hide the slice and edit the area underneath. 
Show the slice again. 


Right-click (Windows) or Control-click (Mac OS) the slice and select Export Selected Slice. 
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4. Select the same folder as the original slice using the same base name and click Save. 


5. Click OK when asked to replace the existing file. 


Note: Avoid resizing the slice beyond its original export size in Fireworks, or you could create unexpected results in the HTML document 
after the slice is updated. 


P a To the to 
Export an animation P 


After you create and optimize an animation, it is ready to export. You can export an animation as any of the following file types: 


Animated GIFs These give the best results for clip art and cartoon-like graphics. 


Flash SWF or Fireworks PNG (no export needed) Export an animation as a SWF file for import into Flash. Or, skip the export step by importing 
a Fireworks PNG source file directly into Flash. Using this direct method, you can import all layers and states of your animation and then further 
edit them within Flash. See Working with Flash. 


Multiple files Exporting animation states or layers as multiple files is useful when you have many symbols on different layers for the same object. 
For example, you can export a banner ad as multiple files if each letter of a company name is animated in a graphic. See Export states or layers 
as multiple files. 


If your document contains more than one animation, you can insert slices to export each animation using different animation settings, such as 
looping and state delay. 


Export an animated GIF 


1. Choose Select > Deselect to deselect all slices and objects, and select Animated GIF as the file format in the Optimize panel. 
2. Select File > Export. 
3. Type aname for the file and select the destination. 


4. Click Save. 


Export multiple animated GIFs with different animation settings 


1. Shift-click the animations to select them all. 

2. Select Edit > Insert > Rectangular Slice or Polygon Slice. 

3. In the message box, click Multiple. 

4. Select each slice individually and use the States panel to set different animation settings for each. 

5. Select all the slices you want to animate, and select Animated GIF as the file format in the Optimize panel. 


6. Right-click (Windows) or Control-click (Mac OS) each slice and select Export Selected Slice to export each slice individually. In the Export 
dialog box, type a name for each file, select the destination, and click Save. 


A . To thet 
Export states or layers as multiple files dias 


Fireworks can export each layer or state in a document as a separate image file and use the optimization settings specified in the Optimize panel. 
The name of the layer or state determines the filename of each exported file. This export method is sometimes used to export animations. 


1. Select File > Export. 

2. Type a filename and select a destination folder. 

3. In the Export pop-up menu, select an option: 
States to Files Exports states as multiple files. 


Layers to Files Exports layers as multiple files. 


Note: This exports all layers on the current state. 


4. To automatically crop each exported image to include only the objects on each state, select Trim Images. To instead include the entire 
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canvas (including blank areas beyond objects), deselect this option. 


5. Click Save. 


To the to 
Export an area from a document 


1. From the Tools panel, select the Export Area tool E, 


2. Drag a marquee defining the portion of the document to export. 
Note: You can adjust the position of the marquee as you drag. While holding down the mouse button, press and hold down the spacebar, 
and then drag the marquee to another location on the canvas. Release the Spacebar to continue drawing the marquee. 
When you release the mouse button, the export area remains selected. 


3. Resize the export area if necessary: 


e To resize the export area marquee proportionally, Shift-drag a handle. 
e To resize the marquee from the center, Alt-drag (Windows) or Option-drag (Mac OS) a handle. 


e To constrain the proportions and resize from the center, Alt-Shift-drag (Windows) or Option-Shift-drag (Mac OS) a handle. 
4. Double-click inside the export area marquee to go to Image Preview. 
5. Adjust settings in the Image Preview, and click Export. 
6. Type a filename and select a destination folder. 
7. In the Export pop-up menu, select Images Only. 


8. Click Save. 


Note: To cancel without exporting, double-click outside the export area marquee, press Escape, or select another tool. 


Export HTML To the top 


Unless you specify otherwise, when you export a sliced Fireworks document, you export an HTML file and its images. To define how Fireworks 
exports HTML, you use the HTML Setup dialog box. 


Fireworks generates pure HTML that can be read by most web browsers and HTML editors. By default, the export specifies UTF-8 encoding. 


There are a variety of ways to export Fireworks HTML: 


e Export an HTML file, which you can later open for editing in an HTML editor. 
e Export each page in a Fireworks file to a separate HTML file. 
e Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an existing HTML document. 


e Export an HTML file, open it in an HTML editor, manually copy sections of code from the file, and paste that code into another HTML 
document. 


e Export HTML as Cascading Style Sheet (CSS) layers and XHTML. 
e Use the Update HTML command to make changes to an HTML file you've previously created. 
Fireworks lets you export HTML in Generic, Dreamweaver, Microsoft® FrontPage®, and Adobe GoLive® formats. 


Note: Adobe Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML to Dreamweaver differently than 
it handles export to other HTML editors. If you are exporting Fireworks HTML to Dreamweaver, see Working with Dreamweaver. 


The export method of getting Fireworks HTML into other applications is ideal if you are working in a team environment. This method divides 
the workflow into segments so that one person can perform a task in one application, and another can take over at a later time using another 
application. 


Include comments in exported HTML 
Fireworks HTML comments begin with <! -- and end with - ->. Anything between these two markers is not interpreted as HTML or JavaScript 
code. 


e Before exporting, select the Include HTML Comments option on the General tab of the HTML Setup dialog box. 
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Results of exporting 
When you export or copy HTML from Fireworks, the following is generated: 


The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements. Fireworks 
HTML contains links to the exported images and sets the web page background color to the canvas color. 


One or more image files, depending on how many slices are in your document and how many states you include in buttons. 


A file called spacer.gif, if necessary. Spacer.gif is a transparent, 1-pixel-by-1-pixel GIF that Fireworks uses to fix spacing problems when 
sliced images are reassembled in an HTML table. You can choose whether Fireworks exports a spacer. 


If you export any pop-up menus, the following files are exported: mm_css_menu.js and a .css file containing the CSS pop-up menu code. If 
your pop-up menus contain submenus, an arrows.gif file is also exported. 


If you export or copy HTML to Dreamweaver, notes files are created that facilitate the integration between Fireworks and Dreamweaver. 
These files have an .mno extension. 


Export Fireworks HTML 


T 


10. 


Select File > Export. 


. Navigate to a folder on your hard drive in which to export. 
. From the Export pop-up menu, select HTML and Images. 


. Click the Options button and select your HTML editor from the HTML Style pop-up menu on the General tab of the HTML Setup dialog box. 


If your HTML editor is not listed, select Generic. 


Note: It's important that you select your HTML editor as the HTML style so that interactive elements such as buttons and rollovers function 
correctly when imported into your HTML editor. 


. Click OK. 


From the HTML pop-up menu, select Export HTML File. 
If your document contains slices, select Export Slices from the Slices pop-up menu. 


To store images in a separate folder, select Put Images In Subfolder. You can select a specific folder or use the Fireworks default Images 
folder. 


If you are exporting a multi-page Fireworks document, deselect the Current Page Only check box to export all of the pages into separate 
HTML documents. 


Click Save. 


After export, you'll see the files Fireworks exported on your hard drive. Images and an HTML file are generated in the location you specified 
in the Export dialog box. 


Copy HTML code to the Clipboard 


You can copy HTML code to the Clipboard in Fireworks in either of two ways. Use the Copy HTML Code command, or select Copy To Clipboard 
as an option in the Export dialog box. You'll later paste this HTML into a document in your preferred HTML editor. 


When determining how to put Fireworks HTML into other applications, consider the following disadvantages of copying HTML code to the 
Clipboard: 


You don't have the option to save images into a subfolder. They must reside in the same folder as the HTML file where you paste the copied 
HTML. An exception is HTML copied to Dreamweaver. 


Any links or paths used in Fireworks pop-up menus will map to your hard drive. HTML copied to Dreamweaver is an exception. 


If you use an HTML editor other than Dreamweaver or Microsoft FrontPage, JavaScript code associated with buttons, behaviors, and rollover 
images is copied but may not function correctly. 


If these issues pose a problem for you, use the Export HTML option instead of copying HTML to the Clipboard. 


Note: Before you copy HTML code, be sure that you've selected the appropriate HTML style and chosen Include HTML Comments from the 
General tab of the HTML Setup dialog box. 


Copy Fireworks HTML using the Copy HTML Code option 
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1. Select Edit > Copy HTML Code. 


2. Follow the wizard. When prompted, specify a folder as the destination for the exported images. This must be the location where your HTML 
file will reside. 


Note: If you plan to paste the HTML code into Dreamweaver, it does not matter where you export the images, as long as they reside in the 
same Dreamweaver site as the HTML file into which you will paste your code. 


Copy Fireworks HTML using the Export dialog box 
1. Select File > Export. 


2. In the Export dialog box, specify a folder as the destination for the exported images. This must be the same location where your HTML file 
will reside. 


Note: If you plan to paste the HTML code into Dreamweaver, it does not matter where you export the images, as long as they reside in the 
same Dreamweaver site as the HTML file into which you will paste your code. 


3. From the Export pop-up menu, select HTML and Images. 

4. From the HTML pop-up menu, select Copy to Clipboard. 

5. If your document contains slices, select Export Slices from the Slices pop-up menu. 

6. Click the Options button, select your HTML editor from the HTML Setup dialog box, and then click OK. 


7. Click Save. 


Paste HTML copied from Fireworks into an HTML document 


1. In your HTML editor, open an existing HTML document or create a new one. Save the document to the same location in which you exported 
your images. 


Note: Saving the HTML file to the same location as the exported images is not necessary if you use Dreamweaver. As long as you export 
the images from Fireworks to a Dreamweaver site, and save the HTML file to a location somewhere within that site, Dreamweaver resolves 
the paths to the associated images. 


2. View the HTML code, and place the insertion point between the <BODY> tags. 


Note: HTML code copied from Fireworks does not include the opening or closing <HTML> and <BODY> tags. 


3. Paste the HTML code. 


If possible when you copy to the Clipboard, export images to the location where they will reside on the website. Fireworks uses document- 
relative URLs, so if the HTML or images are moved, the URL links are broken. 


Copy code from an exported Fireworks file and paste it into another HTML document 

1. Open the Fireworks HTML file you exported in an HTML editor. 

2. Highlight the necessary code and copy it to the Clipboard. 

3. Open an existing HTML document or create a new one. 

4. Paste the code into the new HTML file. You do not have to copy the <HTML> and <BODY> tags, because these should already be included in 
the destination HTML document. 
If you chose Include HTML Comments in the HTML Setup dialog box in Fireworks, follow the instructions in the comments to copy and paste 
the code into the appropriate location. 


5. If your Fireworks document contains interactive elements, copy the JavaScript code. 


JavaScript code is surrounded by <SCRIPT> tags and is located in the <HEAD> section of the document. Copy and paste the entire 
<SCRIPT> section, unless your destination document already has a <SCRIPT> section. In this case you should copy and paste only the 
contents of the <SCRIPT> section into the existing <SCRIPT> section, being careful not to overwrite the contents of the existing section. 
Also ensure there are no duplicate JavaScript functions in the <SCRIPT> section after you paste the code. 


Update exported HTML 
Updating allows you to make changes to a Fireworks HTML document you've previously exported and is useful if you want to update only a portion 
of a document. 
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Note: Update HTML works differently with Dreamweaver documents than it does with other HTML documents. For more information, see Working 
with Dreamweaver. 


When updating, you can choose to replace just the images that changed, or overwrite all code and images. If you choose to replace only the 
images that changed, any changes you made to the HTML file outside of Fireworks are preserved. 


Note: For considerable changes to document layout, make your changes in Fireworks and re-export the HTML file. 
1. Select File > Update HTML. 
2. Select the file to update. 
3. Click Open. 
4. Do one of the following: 


e If no Fireworks-generated HTML is found, click OK to insert new HTML at the end of the document. 
e If Fireworks-generated HTML is found, select one of the following and click OK: 

Replace Images and Their HTML 

Replaces the previous Fireworks HTML 

Update Images Only 


Overwrites only the images 


5. If the Select Images Folder dialog box appears, select a folder and click Open. 


Export CSS layers 
CSS layers can overlap and be stacked on top of one another. In Fireworks, normal HTML output does not overlap. 


1. Select File > Export. 
2. Type a filename and select a destination folder. 
3. From the Export pop-up menu, select CSS And Images. 


e To export only the current state, select Current State Only. 
e To export only the current page, select Current Page Only. 


e To choose a folder for images, select Put Images In Subfolder. 
4. Click Options to set the HTML page properties. 
5. Click Browse to specify a background image and set the background image tiling: 


e Select No Repeat to display the image only once. 
e Select Repeat to repeat, or tile, the image both horizontally and vertically. 
e Select Repeat-x to tile the image horizontally. 


e Select the Repeat-y option to tile the image vertically. 
6. Select the page alignment on the browser as left, center, or right. 


7. Click OK, and then click Save. 


Export XHTML 

XHTML is a combination of HTML, the current standard for formatting and displaying web pages, and XML (Extensible Markup Language). XHTML 
is backward-compatible—meaning that most current web browsers can view it—and it can be read by any device that displays XML content, such 
as PDAs, mobile phones, and other handheld devices. 


Fireworks can also import XHTML. See Create Fireworks PNG files from HTML files. 
For more information on XHTML, visit the World Wide Web Consortium (W3C) XHTML specification at www.w3.org. 


1. Select File > HTML Setup, select an XHTML style from the HTML Style pop-up menu on the General tab, and then click OK. 


2. Export your document using any of the methods available for exporting or copying HTML. See Export HTML. 
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Note: Fireworks uses UTF-8 encoding when exporting to XHTML. 


Export files with and without UTF-8 encoding 
UTF-8, which stands for Universal Character Set Transformation Format-8, is a text-encoding method that allows web browsers to display different 
character sets (for example, Chinese text and English text) on the same HTML page. UTF-8 encoding is turned on by default. 


Fireworks can also import documents that use UTF-8 encoding. See Create Fireworks PNG files from HTML files. 


Export documents without UTF-8 encoding 
1. Select File > HTML Setup. 
2. On the Document Specific tab, clear the UTF-8 Encoding check box and click OK. 


3. Export the document using any of the methods available for exporting or copying HTML. 


Set HTML export options 
The HTML Setup dialog box allows you to define how Fireworks exports HTML. Changes made in the Document Specific tab affect the current 
document only. General and Table settings are global preferences and affect all new documents. 


1. Do one of the following: 


e Select File > HTML Setup. 


e Click the Options button in the Export dialog box. 
2. In the General tab, select the options you prefer. 


HTML Style Select the style for exported HTML. 


Generic HTML works in any HTML editor. However, if your document contains behaviors or other interactive content, select your specific 
editor if it appears in the list. 


To export your document using the XHTML standard, select the appropriate XHTML style from the pop-up menu. 
Extension Select a file extension from the pop-up menu or enter a new one. 


Include HTML Comments Select to include comments regarding where to copy and paste in the HTML. Recommended if your document 
contains interactive elements such as buttons, behaviors, or rollover images. 

Lowercase File Name Select to make the name of the HTML file and the associated image files lowercase on export. 

Note: This option won't change the HTML file's extension to lowercase if an uppercase extension was selected in the Extension pop-up 


menu. 


Use CSS For Popup Menus Select to use CSS rather than JavaScript for your pop-up menu code. You can use Dreamweaver to index the 
menus, as well as update the links within the code. 


Write CSS To An External File Select to have the CSS code written to an external .css file that is exported to the same location as the 
HTML file. The name of the .css file matches the name of the HTML file (except for the file extension). Choosing this option also exports a 
file named mm_css_menu.js to the same location as the HTML file. 


Note: This option is available only if you have chosen the Use CSS For Popup Menus option. 


File Creator (Mac OS) Select an associated application from the pop-up menu. When you double-click the exported HTML file on your hard 
disk, it automatically opens in the selected application. 


3. In the Table tab, select settings for your HTML tables. For information, see Define how HTML tables are exported. 
4. In the Document Specific tab, select from the following options: 


Slice File Names Select a formula for auto-naming slices in the pop-up menus. You can use the default settings, or choose your own 
options. 

Note: If None is selected for any of the first three menus, Fireworks exports Slice files that overwrite one another, resulting in a single 
exported graphic and a table that displays this graphic in every cell. 


Default Alt Tag Enter text to appear in place of all images while they are downloading from the web and in place of any images that fail to 
download. In some browsers, it may also appear as a tool tip when the pointer passes over the image. This is also an aid for vision-impaired 
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web users. 


Export Multiple Nav Bar HTML Pages (For Use Without Frame Sets) Select when exporting a navigation bar that links several pages 
together. Fireworks exports additional pages for each button in the navigation bar. 


Include Areas Without Slice Objects Select to include areas of the canvas that are not covered with slices. 


UTF-8 Encoding Turned on by default. Lets your exported document display characters from multiple character sets. To turn off this option, 
deselect the check box. 


5. To save these settings as your global default settings, click Set Defaults. 


Export Adobe PDF files 


To the top 


When you want to print a Fireworks design or distribute it for review, export to Adobe PDF. Reviewers can add comments and reply to comments 
of others in Adobe Reader® or Acrobat®. For information about setting up PDF reviews, see Acrobat Help. 


Exported PDF files retain all pages and hypertext links, letting reviewers navigate just as they would on the web. Unlike HTML prototypes, 
however, Adobe PDF provides security settings that prevent reviewers from editing or copying your designs. 


1. Choose File > Export. 


2. From the Export pop-up menu, choose Adobe PDF. 


3. Choose the pages to export, and select View PDF After Export to automatically open the PDF in Adobe Reader or Acrobat. 


4. To customize the PDF, click Options, and then adjust the following settings: 


Compatibility Determines which Adobe PDF applications can open the exported file. 
Compression Determines the type of image compression, reducing file size. In general, JPEG and JPEG2000 compression give better 
results on images like photographs with gradual transitions from color to color. ZIP is the better choice for illustrations with large areas of 


solid, flat colors. 


Quality For JPEG or JPEG2000 compression, offers image quality settings. Selecting High quality produces a large file size with good 
image quality. 


Convert To Grayscale Converts all images to grayscale, reducing file size. 
Enable Text Selection Lets reviewers copy text from the exported file. Deselect this option to greatly reduce file size. 


Bleed Value Determines the pixel width of the blank border that surrounds the image on each page. A value of 20, for example, surrounds 
each image with a 20-pixel border. 


Use Password to Open Document Requires the Open Password to open the exported file. 


Use Password to Restrict Tasks Requires the Secure Password to perform these selected functions: Printing, Editing, Copying, and 
Commenting. 


. Click OK to close the Options dialog box. 


. Specify a filename and location, and then click Save. 


Note: If pages in your Fireworks document have transparent canvas, objects with any applied transparencies lose their transparent 
characteristics when you export to PDF. To avoid this, set the canvas to a non-transparent background before exporting to PDF. 


View exported PDF files (recommended) 
When you view exported PDF files in Adobe Acrobat or Adobe Reader, use the following settings: 


. In Adobe Acrobat, or Adobe Reader select Edit > Preferences. 


2. Select Page Display on the left panel. 


3. Set Custom Resolution to 72 pixels per inch. 
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4. Set the Zoom value to 100%. 


Export FXG files To the top 


FXG is a file format supported by Flash Catalyst, Fireworks, Illustrator, and Photoshop. When you export a file containing vector and bitmap 
images using FXG export, a separate folder with the name <filename.assets> is created. The folder contains the bitmap images associated with 


the file. 
The import operation fails if any of the associated files is deleted from this folder. 


Note: Elements, filters, Blend Modes, gradients, and masks for which there is no corresponding mapping tag in FXG are exported as bitmap 
graphics. 


1. Select File > Export, and navigate to the location where you want to save the files. 
2. Enter a filename for the FXG file. 
3. In the Export dialog box, select FXG And Images from the Export menu. 


4. Click Save. 
Note: Objects that extend beyond the canvas in Fireworks are displayed completely when the exported FXG file is opened in Flash Catalyst. 


e Use the Export Wizard 


Twitter™ and Facebook posts are not covered under the terms of Creative Commons. 


Legal Notices | Online Privacy Policy 
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Optimize graphics files 


Optimize GIF, PNG, TIFF, BMP, and PICT files 
Optimize JPEGs 


To the top 


Optimize GIF, PNG, TIFF, BMP, and PICT files 


Each graphic file format in Fireworks has a set of optimization options. The 8-bit file types such as GIF, PNG 8, TIFF 8, BMP 8, and PICT 8 offer 
the greatest amount of optimization control. 


Q For continuous-tone web graphics such as photos, use a 24-bit format such as JPEG. (See Optimize JPEGs.) 


Fireworks optimization settings are similar for all 8-bit graphic file formats. For web file formats such as GIF and PNG, you can specify the amount 
of compression. 


As you experiment with different optimization settings, use the 2-Up and 4-Up buttons to test and compare a graphic's appearance and estimated 
file size. 


Choosing a color palette 
All 8-bit images contain a color palette of up to 256 available colors. The image uses only these colors, but it might not use all of them. 


& In the Optimize panel, select one of the following options from the Indexed Palette pop-up menu: 

Adaptive A custom palette derived from the actual colors in the document. Most often produces the highest quality image. 

Web Adaptive An adaptive palette in which colors are converted to the closest websafe color. Websafe colors are those that come from the Web 
216 palette. 

Web 216 A palette of the 216 colors common to both Windows and Mac OS computers. This palette is often called a websafe or browser-safe 
palette because it produces fairly consistent results in various web browsers on either platform when viewed on 8-bit monitors. 

Exact Contains the exact colors used in the image. Only images containing 256 or fewer colors may use the Exact palette. Otherwise, the palette 
switches to Adaptive. 

Windows and Mac OS Each contains the 256 colors defined by the Windows or Mac OS platform standards, respectively. 

Grayscale A palette of 256 or fewer shades of gray. Choosing this palette converts the image to grayscale. 

Black and White A two-color palette consisting only of black and white. 

Uniform A mathematical palette based on RGB pixel values. 

Custom A palette that has been modified or loaded from an external palette (ACT file) or a GIF file. 

You can optimize and customize color palettes using the color table in the Optimize panel. 


Import a custom palette 
1. Do one of the following: 
e Select Load Palette from the Optimize panel options menu. 
e Select Custom from the Optimize panel Indexed Palette pop-up menu. 
2. Navigate to an ACT or GIF palette file and click Open. 
The colors from the ACT or GIF file are added to the color table in the Optimize panel. 


Note: Windows users must select GIF Files from the Files Of Type pop-up menu to see files with a .gif extension in the Open dialog box. 


Select a color depth for an 8-bit image 

Color depth is the number of colors in the graphic. Reducing color depth makes a smaller file size, but it can also reduce the image quality. When 
you reduce color depth, some colors in the image are discarded, beginning with those used least. Pixels containing discarded colors convert to the 
closest color remaining in the palette. 


& Do one of the following: 
e Inthe Optimize panel, select an option from the Colors pop-up menu. 
e Type a value (from 2 to 256) in the text box. 


Note: The number at the bottom of the color table indicates the actual number of colors visible in the image. If no number is visible, click the 
Rebuild button. 
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Remove unused colors in an 8-bit image 
This makes the file size smaller. 


“* From the Optimize panel Options menu, select Remove Unused Colors. 


Include all palette colors, including those not present in the saved image 
“* Deselect Remove Unused Colors. 


View and edit colors in a palette 

The color table in the Optimize panel displays colors in the current preview when you are working in 8-bit color or less. You can also modify the 
palette of an image. The color table updates automatically when you are in Preview mode. It appears empty if you are optimizing more than one 
slice at a time or if you are not working in 8-bit color. 


Various small symbols appear on some color swatches, indicating certain characteristics of individual colors, as follows: 
Symbol Meaning 


| The color has been edited, affecting only the exported document. 
Editing a color doesn’t change the color in the source document. 


| The color is locked. 

jl The color is transparent. 

E The color is web-safe. 

E] The color has multiple attributes. In this case, the color is web- 


safe, is locked, and has been edited. 


Rebuild the color table to reflect edits in the document 
The Rebuild button appears at the bottom of the Optimize panel when a rebuild is needed. 


& Click the Rebuild button. 


Select colors in a palette 
e To select a single color, click the color in the Optimize panel color table. 
e To select multiple colors, Control-click (Windows) or Command-click (Mac OS) the colors. 


e To select a range of colors, click a color, and then hold Shift and click the last color in the range. 


Preview all the pixels in the document that contain a specific color 

1. Click the Preview button at the upper left of the document window. 

2. Click and hold on a color swatch in the Optimize panel color table. 
The pixels that contain the selected color swatch temporarily change to another highlight color until you release the mouse button. 


Note: When previewing pixels in the document using the 2-Up or 4-Up view, select a view other than the Original view. 


Lock or unlock colors in a palette 
You can lock individual colors so that you cannot remove or change them when changing palettes or when reducing the number of colors ina 
palette. If you switch to another palette after colors have been locked, locked colors are added to the new palette. 


e To toggle locking for a selected color swatch, click the Lock button & at the bottom of the Optimize panel, or Right-click (Windows) or 
Control-click (Mac OS) the color swatch, and select Lock Color. 


e To unlock all colors, select Unlock All Colors from the Optimize panel Options menu. 


Edit colors in a palette 

Editing a color replaces all instances of that color in images that are exported or saved as a bitmap. Except with bitmaps, editing does not replace 
the color in the original image. If you are working with a bitmap, save a copy of the image as a PNG file to retain an editable version of the original 
image. 


1. Do one of the following to open the system color picker: 


219 


e Select a color and click the Edit Color button @ at the bottom of the Optimize panel. 
e Double-click a color in the color table. 
2. Change the color. 


Note: Right-click (Windows) or Control-click (Mac OS) a color in the palette to display edit options. 


Use websafe colors 


Websafe colors are colors that are common to both Mac OS and Windows platforms. These colors are not dithered when viewed in a web browser 
on a computer display set to 256 colors. For a Fireworks PNG file, changing colors to websafe in the Optimize panel affects only the exported 
version of the image, not the actual image. 


e To Force all colors to be websafe colors, select Web 216 from the Indexed Palette pop-up menu in the Optimize panel. 
e To create an adaptive palette that favors websafe colors, select Web Adaptive from the Indexed Palette pop-up menu in the Optimize panel. 


e To Force a color to its closest websafe equivalent, select a color in the Optimize panel color table, and then click the Snap To Web Safe 
button @. 


Use dithering to approximate colors a palette lacks 


Dithering approximates colors that are not in the current palette by alternating similarly colored pixels. From a distance, the colors blend to look 
like the missing color. Dithering is especially helpful when exporting images with complex blends or gradients or when exporting photographic 
images to an 8-bit graphic file format such as GIF. 


& Enter a percentage value in the Dither text box of the Optimize panel. 


Note: Dithering can greatly increase file size. 
Save color palettes 


You can save custom palettes as external palette files that can be used with other Fireworks documents or in other applications that support 
external palette files, such as Adobe Flash®, and Adobe Photoshop®. Saved palette files have the .act extension. 


1. From the Optimize panel Options menu, select Save Palette. 
2. Type aname and select a destination folder. 
3. Click Save. 


You can load the saved palette file into the Swatches panel or the Optimize panel for use when exporting other documents. 


Adjust compression 
Compress GIF files by changing their loss setting. Higher loss settings can yield smaller files but lower image quality. A loss setting between 5 and 
15 is typically best. 


Original GIF; loss value of 30; loss value of 100 


& In the Optimize panel, enter a Loss setting. 


Make areas transparent 
Transparent areas in GIF and 8-bit PNG files allow the background of a web page to show through those areas. In Fireworks, a gray-and-white 
checkerboard in the document window identifies transparent areas. 


Optimized image preview in Fireworks; image exported with transparency and placed on a web page with a colored background 
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Note: Although 32-bit PNG files contain transparency, the Optimize panel does not have a transparency option for them. 
For GIF images, use index transparency, which turns on or turns off pixels with specific color values. 


GIF images are exported without transparency by default. Even if the canvas behind an image or object appears transparent in Original view in 
Fireworks, the background for that image may not be transparent unless you select Index Transparency before export. 


For PNG files, you can use alpha transparency, which is often used in exported graphics that contain gradient transparency and semi-opaque 
pixels. Although the transparency is not very useful for export to the web (because most web browsers do not support PNG format), it is useful for 
export to Flash or Adobe Director, because both applications support this type of transparency. 


Note: Setting colors to transparent affects only the exported version of the image, not the actual image. To see what the exported image will look 
like, use a preview. 
Make an image background transparent 

1. Click the Preview, 2-Up, or 4-Up button at the upper left of the document window. In 2-Up or 4-Up view, click a view other than the original. 


2. In the Optimize panel (Window > Optimize), select GIF or PNG 8 as the file format. Then select Index Transparency from the Choose Type 
Of Transparency pop-up menu. 


The canvas color is made transparent in the preview, and the graphic is ready for export. 


Select a color for transparency 
1. Click the Preview, 2-Up, or 4-Up button at the upper left of the document window. In 2-Up or 4-Up view, click a view other than the original. 


2. In the Optimize panel (Window > Optimize), select GIF or PNG 8 as the file format. Then select Index Transparency from the Choose Type 
Of Transparency pop-up menu. 


3. To select a different color, click the Select Transparency Color button EÈ. 


4. Click a color swatch in the Optimize panel color table, or click a color in the document. 


Add or remove transparent colors 
1. Click the Preview, 2-Up, or 4-Up button at the upper left of the document window. In 2-Up or 4-Up view, click a view other than the original. 
Note: Though you can add or remove transparent colors in Original view, you won't see the results until you display a preview. 


2. In the Optimize panel (Window > Optimize), select GIF or PNG 8 as the file format. Then select Index Transparency from the Choose Type 
Of Transparency pop-up menu. 


3. At the bottom of the panel, click the Add Color To Transparency EÈ or Remove Color From Transparency button FÈ. 


4. Click a swatch in the color table, or click a color in the document preview. 


Interlace images to download gradually 
When viewed in a web browser, interlaced images display at a low resolution first and then transition to full resolution by the time the download is 
complete. 


Note: This option is available only for GIF and PNG file formats. You can get similar results with a JPEG by making it progressive. 
“* From the Optimize panel Options menu, select Interlaced. 


Match a target background color 

Anti-aliasing makes an object appear smoother by blending its color into the background. For example, if the object is black and the page on which 
it rests is white, anti-aliasing adds several shades of gray to the pixels surrounding the object's border to make a smoother transition between the 
black and white. 


& In the Optimize panel, select a color from the Matte pop-up menu. Match it as closely as possible to the target background color on which the 
graphic will be placed. 


Note: Anti-aliasing is applied only to soft-edged objects that lie directly on top of the canvas. 


Remove halos 

When you make the canvas color transparent on an image that was previously anti-aliased, the pixels from the anti-aliasing remain. Then when 
you export (or in some cases, save) the graphic and place it on a web page with a different background color, the perimeter pixels of the anti- 
aliased object may appear as a halo, which is especially noticeable on a dark background. 
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Removing the halos} 


Prevent halos in Fireworks PNG files and imported Photoshop files 
& Do one of the following: 
e Set the Canvas Color in the Property inspector or the Matte Color in the Optimize panel to the color of the target web page background. 


e With the object you want to export selected, select Hard from the Edge pop-up menu in the Property inspector. 


Remove a halo manually from a GIF or other graphic file 


1. With the file open in Fireworks, click the Preview, 2-Up, or 4-Up button at the upper left of the document window. In 2-Up or 4-Up view, click 
a view other than the original. 


2. In the Optimize panel, select Index Transparency from the Transparency pop-up menu. 
3. Click the Add Color To Transparency button & and click a pixel in the halo. 
All pixels of the same color are removed in the preview. 


4. Ifthe halo is still there, repeat step 3 until the halo is gone. 


To the top 


Optimize JPEGs 
Using the Optimize panel, you can optimize JPEGs by setting compression and smoothing options. 


JPEGs are always saved and exported in 24-bit color, so you can't optimize a JPEG by editing its color palette. The color table is empty when a 
JPEG image is selected. 


As you experiment with different optimization settings, use the 2-Up and 4-Up buttons to test and compare a JPEG file's appearance and 
estimated file size. 


Note: JPEGs can be saved directly from within the "Save As" dialog box. 


Adjust JPEG quality 
JPEG is a lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file. 


Original image; quality setting of 50; quality setting of 20 


& Adjust the quality with the Quality slider pop-up menu in the Optimize panel. 
A high percentage setting maintains image quality but compresses less, producing larger files. 


A low percentage setting yields a small file but produces a lower-quality image. 


Selectively compress areas of a JPEG 


To reduce the overall size of the image while retaining the quality of the more important areas, compress areas of particular interest at a higher 
quality level, and compress areas of lesser significance, such as backgrounds, at a lower quality level. 
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The selected area in this image is being compressed at a quality level of 90, while the unselected area is being compressed at a quality level of 
50. 


1, 


In Original view, select an area of the graphic for compression using one of the Marquee tools. 
Select Modify > Selective JPEG > Save Selection as JPEG Mask. 

Select JPEG from the Export File Format pop-up menu in the Optimize panel. 

Click the Edit Selective Quality Options button in the Optimize panel. 

Select Enable Selective Quality and enter a value in the text box. 


Entering a low value compresses the selected area more than the rest of the image; entering a high value compresses it less than the rest 
of the image. 


. (Optional) Change the Overlay Color for the Selective JPEG area. This does not affect the output. 
. To export all text items at a higher level regardless of the Selective Quality value, select Preserve Text Quality. 


. To export button symbols at a higher level, select Preserve Button Quality. 


Modify the selective JPEG compression area 


1. 


2 
3. 
4 
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Select Modify > Selective JPEG > Restore JPEG Mask As Selection. 

. Use the Marquee tool or another selection tool to make changes to the size of the area. 
Select Modify > Selective JPEG > Save Selection As JPEG Mask. 

. (Optional) Change Selective Quality settings in the Optimize panel. 


Note: To undo a selection, select Modify > Selective JPEG > Remove JPEG Mask. 


ur or Sharpen JPEG detail 


Smoothing blurs hard edges, which do not compress well in JPEGs. Higher numbers produce more blurring in the exported or saved JPEG, 
typically creating smaller files. A smoothing setting of about 3 reduces the size of the image while still maintaining reasonable quality. 


Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve the sharpness of these areas. This setting increases 


file size. 


Do either of the following: 


To blur detail, set Smoothing in the Optimize panel. 


To sharpen detail, select Sharpen JPEG Edges from the Optimize panel options menu. 


Create a progressive JPEG image 
Progressive JPEGs, like interlaced GIFs and PNGs, are displayed at a low resolution initially and then increase in quality as they download. 


& 


From the Optimize panel Options menu, select Progressive JPEG. 


Note: Some older bitmap-editing applications cannot open progressive JPEGs. 
More Help topics 
Export from the workspace 
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Optimize in the workspace 


Optimize individual slices 

Preview and compare optimization settings 
Optimize by using a preset option 

Choose a file type 

Save and reuse optimization settings 


Fireworks has optimization and export features in the workspace that give you control over how files are exported. You can use preset optimization 
options, or you can customize the optimization by selecting specific options such as file type and color palette. 


The Optimize panel contains the key controls for optimizing and (for 8-bit file formats) a table that displays the colors in the current export color 
palette. The panel displays settings that pertain to the active selection (a slice or the whole document). 


The preview buttons in the document window show how the exported graphic would appear with the current optimization settings. 


You can optimize the whole document the same way, or select individual slices or selected areas of a JPEG and assign different optimization 
settings for each. 


ie Ps iz S ca iz To thet 
Optimize individual slices oe 


When a slice is selected, the Property inspector has a Slice Export Settings pop-up menu from which you can select preset (Saved) optimization 
settings. 


1. Click a slice to select it. Shift-click to select more than one slice. 


2. Select options in the Optimize panel. 


i so à x à To thet 
Preview and compare optimization settings ee 


Use the document preview buttons to display the graphic as it would appear in a web browser, based on optimization settings. You can preview 
rollover and navigation behaviors, as well as animation. 


| J orina | Rprevew Mau EH | al Pooe1 >| 
The Original button and the document preview buttons 


The preview displays the total size, estimated download time, and file format of a document. The estimated download time is the average amount 
of time it would take to download all the slices and states on a 56K modem. The 2-Up and 4-Up views display additional information that varies 
depending on the file type selected. 


You can optimize an entire document or only selected slices while viewing a preview. The slice overlay helps you differentiate the slices currently 
being optimized from the rest of the document. 


224 


Al Untitled-1.png @ 66% (Slice) DER) 


2 Original | B Preview m2-up HH 4-Up 


Original: Untitled-1.png + l 


22.60K_3 sec @56kbps JPEG (Slice) I4 bi di i> 289 x 450 66% ~ 


When slice overlay is on, the slices not being optimized are dimmed. 


Preview a graphic based on the current optimization settings 
“* Click the Preview button in the upper left of the document window. 


Note: Click Hide Slices Jin the Tools panel to hide slices and slice guides while previewing. 


Compare views with different optimization settings 
1. Click the 2-Up or 4-Up button in the upper left of the document window. 
2. Click one of the split-view previews. 
3. Enter settings in the Optimize panel. 
4. Select the other previews and specify different optimization settings for each preview. 


When you select 2-Up or 4-Up view, the first split-view displays the original Fireworks PNG document so that you can compare it with 
optimized versions. You can switch this view with another optimized version. 


Switch any optimized view to the original view in 2-Up or 4-Up mode 
1. Select an optimized view. 


2. From the Preview pop-up menu at the bottom of the preview window, select Original (No Preview). 


Switch the original view to an optimized view in 2-Up or 4-Up mode 
1. Select the view containing the original. 


2. From the Preview pop-up menu, select Image Preview. 


Hide or show the slice overlay 
“* Select View > Slice Overlay. 


ee š z To the to 
Optimize by using a preset option j 
Choose Window Optimize to open the Optimize panel. When you choose a preset option, the rest of the options in the Optimize panel are set for 
you. 

& Select a preset option from the Settings pop-up menu in the Property inspector or the Optimize panel. 

GIF Web 216 Forces all colors to web-safe colors. The color palette contains up to 216 colors. 

GIF WebSnap 256 Converts colors to their closest web-safe color. The color palette contains up to a maximum of 256 colors. 

GIF WebSnap 128 Converts colors to their closest web-safe color. The color palette contains up to 128 colors. 
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GIF Adaptive 256 Contains only the actual colors used in the graphic. The color palette contains up to a maximum of 256 colors. 

JPEG - Better Quality Sets quality to 80 and smoothing to O, resulting in a high-quality but larger graphic. 

JPEG - Smaller File Sets quality to 60 and smoothing to 2, resulting in a graphic less than half the size of a Better Quality JPEG but with reduced 
quality. 

Animated GIF WebSnap 128 Sets the file format to Animated GIF and converts colors to their closest web-safe color. The color palette contains 
up to 128 colors. 


Choose a file type To the top 


Customize the optimization by selecting a specific file type from the Export File Format pop-up menu in the Optimize panel and then setting 
format-specific options, such as color depth, dither, and quality. You can save the settings as a new preset. 

GIF Graphics Interchange Format (GIF) is a popular web graphic format that is ideal for cartoons, logos, images with transparent areas, and 
animations. Images with areas of solid color compress best when exported as GIF files. GIF files contain a maximum of 256 colors. 

JPEG Developed by the Joint Photographic Experts Group specifically for photographic or high-color images. JPEG supports millions of colors 
(24-bit). The JPEG format is best for scanned photographs, images using textures, images with gradient color transitions, and any images that 
require more than 256 colors. 

PNG Portable Network Graphic (PNG) is a versatile web graphic format that can support up to 32-bit color, can contain transparency or an alpha 
channel, and can be progressive. However, not all web browsers can view PNG images. Although PNG is the native file format for Fireworks, 
Fireworks PNG files contain additional application-specific information that is not stored in an exported PNG file or in files created in other 
applications. 

WBMP Wireless Bitmap (WBMP) is a graphic format created for mobile computing devices such as cell phones and PDAs. This format is used on 
Wireless Application Protocol (WAP) pages. Because WBMP is a 1-bit format, only two colors are visible: black and white. 

TIFF Tagged Image File Format (TIFF) is a graphic format used for storing bitmap images. TIFF files are most commonly used in print publishing. 
Many multimedia applications also accept imported TIFF files. 

BMP The Microsoft Windows graphic file format. Many applications can import BMP images. 

PICT Developed by Apple Computer and most commonly used on Macintosh operating systems. Most Mac applications are capable of importing 
PICT images. 


Save and reuse optimization settings ee 
Fireworks remembers the last optimization settings you used after you perform any of the following actions: 
e File > Save 
e File > Save As 
e File > Export 
Fireworks then applies these settings to new documents. 
Note: New slices get their default optimization settings from the parent document. 


You can also save custom optimization settings for future use in optimization or batch processing. The following information is saved in 
custom preset optimizations: 


e Settings and color table in the Optimize panel 


e State delay settings chosen in the States panel (for animations only) 


Save optimization settings as a preset 

Saved optimization settings appear at the bottom of the Settings pop-up menu in the Optimize panel and in the Property inspector. The preset file 
is saved in the Export Settings folder in your user-specific Fireworks configuration folder. For information on the location of this folder, see About 
user configuration files. 


1. From the Optimize panel Options menu, select Save Settings. 


2. Type aname for the optimization preset and click OK. 


Share saved optimization settings with another Fireworks user 
& Copy the saved optimization preset file from the Export Settings folder to the same folder on another computer. 


Note: The location of the Export Settings folder varies depending on your operating system. 
Delete a custom preset optimization 
You cannot delete a Fireworks preset optimization setting. 

1. In the Optimize panel Saved Settings pop-up menu, select an optimization setting. 


2. From the Optimize panel Options menu, select Delete Settings. 
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Send a Fireworks document as an e-mail attachment 


You can send a Fireworks PNG, a compressed JPEG, or a document using other file formats and optimization settings available in the Optimize 
panel. 


1. Select File > Send to E-mail. 
2. Select one of the following options: 
Fireworks PNG Attaches the current PNG document to a new e-mail message. 
JPG Compressed Attaches the current document to a new e-mail message using the JPEG - Better Quality optimization setting. 


Use Export Settings Attaches the current document to an e-mail message using the settings defined in the Optimize panel. 
Note: Mozilla, Netscape 6, and Nisus Emailer are not supported on the Macintosh. 
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Use the Export Wizard 


Exporting graphics from Adobe® Fireworks® is a two-step process. Before you export, you must optimize the graphics—select options that make 
the graphics look as good as possible while restricting file size so that the graphics download as fast as possible. 


To be guided through the optimization and export process, use the Export Wizard. This wizard suggests settings, and displays the Image Preview 
to help with optimization. The Image Preview can be used independently of the wizard as well. 


To have more control over the process, use workspace tools such as the Optimize panel, the preview buttons in the document window, and the 
Export dialog box. 


In some cases, you can save graphics without exporting them. For more information, see Save documents in other formats. 
1. Select File > Export Wizard. 
2. Answer any questions that appear and click Continue in each panel. 
Q Select Target Export File Size in the first panel to optimize to a maximum file size. 
3. Click Exit in the Analysis Results window of the wizard. 
The Image Preview opens with recommended export options. 


More Help topics 
Export from the workspace 
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Use the Image Preview 


Manipulate the preview area 
Set Image Preview options 
Export using Image Preview 


You can open the Image Preview either through the Export Wizard or from the File menu (File > Image Preview). 


The preview area displays the document or graphic exactly as it is exported and estimates file size and download time with the current export 
settings. 
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A. Saved set of options for the selected export B. File size and download time estimates C. Preview chosen export settings D. Save export 
settings in the active view 


When you export animated GIFs or JavaScript rollovers, the estimated file size represents the total size across all states. 


Note: To increase redraw speed of the Image Preview, deselect Preview. To stop the redraw of the preview area when changing settings, press 
Escape. 


3 r To thet 
Manipulate the preview area ia 


Zoom the image 


“ Click the Zoom button A and then click in the preview to magnify the preview. Alt-click (Windows) or Option-click (Mac OS) the button in the 
preview to zoom out. 


Pan the image 
& Do either of the following: 


e Click the Pointer button Ħ at the bottom of the dialog box and drag in the preview. 


e Hold down the spacebar when the Zoom pointer is active and drag in the preview. 


Divide the preview area to compare settings 
Click a split-view button Æ, 1, E. 


Each preview window can display a preview of the graphic with different export settings. 


Note: When you zoom or pan while multiple views are open, all views zoom and pan simultaneously. 


š A To thet 
Set Image Preview options as 
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Optimize an image based on target file size 


1, 


2. 


Click the Options tab. 


Click the Optimize To Size Wizard button g. 
Enter a file size in kilobytes and click OK. 


The Optimize To Size Wizard attempts to match the requested file size using these methods: 


e Adjusting JPEG quality 

e Modifying JPEG smoothing 

e Altering the number of colors in 8-bit images 
e Changing dither settings in 8-bit images 


e Enabling or disabling optimization settings 


Set exported image dimensions 


1. Click the File tab. 


2. Specify a scale percentage or enter the width and height in pixels. Select Constrain to scale the width and height proportionally. 


Image Preview 


Options File | Animation | 
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Define only a portion of an image for export 


1. 
2. 


Click the File tab. 
Select Export Area, and do one of the following: 


e Drag the dotted border that appears around the preview until it encloses the export area. (Drag inside the preview to move hidden areas 
into view.) 


e Enter pixel coordinates for the boundaries of the export area. 


Select animation settings 


L; 
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Click the Animation tab. 


e To display a single state, select a state from the list on the left side of the dialog box. You can also use the state controls in the lower- 
right area of the dialog box. 


e To play the animation, click the Play/Stop control in the lower right area of the dialog box. 
To specify the state disposal method, select a state from the list, click the trash can icon, and select one of the following options: 


Unspecified Determines a disposal method for the current state automatically, discarding the current state if the next state contains layer 
transparency. For most animations, this default, automatic option yields the best visual results and smallest file sizes. 


None Preserves the current state as the next state is added to the display. The current state (and preceding states) may show through 
transparent areas of the next state. Use a browser to see an accurate preview of an animation using this option. 


Restore to Background Discards the current state and temporarily replaces it with the background of the web page. Only one state 
appears at a time. Choose this option if animated objects move above a transparent background. 


Restore to Previous Discards the current state and temporarily replaces it with the previous state. Choose this option if animated objects 
move above an opaque background. 


. To set the state delay, select a state from the list and enter the delay time in hundredths of a second in the State Delay box. 
. To set the animation to play repeatedly, click the Looping button and select the number of repetitions from the pop-up menu. 
. To crop each state so that only the image area that differs between states is output, select Crop Each State. This option reduces file size. 


. To output only pixels that change between states, select Save Differences Between States. This option reduces file size. 
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Export using Image Preview j 


1. Select File > Image Preview. 
2. Select options on each tab. 

3. Click Export. 
4 


. In the Export dialog box, type a name for the file, select a destination, set any other options, and then click Save. 
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Fireworks and other applications 
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Using Fireworks with Photoshop 


Place Photoshop images in Fireworks 
Use Photoshop filters and plug-ins 
Place Fireworks graphics in Photoshop 


Fireworks imports native Photoshop (PSD) files and retains many Photoshop features. You can also export Fireworks graphics to Photoshop for 
detailed image editing. 


Place Photoshop images in Fireworks To the top 


You place Photoshop images into Fireworks using the File > Import and File > Open commands, or by dragging files to the canvas. The Import 
command provides access to unique options for the background layer and layer folders. By contrast, the Open command and file dragging method 
provide access to options for guides and states. 


Converted and unsupported Photoshop features in Fireworks 
When you open or import a Photoshop file, Fireworks converts the image to PNG format using import preferences that you specify. (See 
Photoshop Import and open preferences.) 

e Individual layer masks convert to Fireworks object masks. Group masks are unsupported. 


e Clipping masks convert to object masks, but their appearance changes slightly. To maintain appearance but lose editability, select the 
Clipping Masks preference. 


e Blending modes for layers convert to blending modes for Fireworks objects, if corresponding modes exist. 


e Layer effects are retained by default. If you prefer to convert these effects to corresponding Live Filters, select the Layer Effects preference. 
Note, however, that similar effects and filters might differ slightly in appearance. 


e The first alpha channel in the Channels palette converts to transparent areas in the Fireworks image. Fireworks does not support additional 
Photoshop alpha channels. 


e All Photoshop color depths and modes convert to 8-bit RGB. 


Drag, open, or import Photoshop images into Fireworks 
Each image you drag, open, or import becomes a new bitmap object. 


Note: In Windows, Photoshop filenames must include a PSD extension for Fireworks to recognize the file type. 
1. Do either of the following: 


e Drag a Photoshop image or file into an open Fireworks document. 


e Select File > Open or File > Import, and navigate to a Photoshop (PSD) file. 
2. Click Open. 
3. In the dialog box that appears, set image options, and then click OK. 


4. If you used the File > Import command, a cursor shaped like an inverted L appears. On the canvas, click where you want to position the 
upper-left corner of the image. 


Import options for Photoshop files 
When you import or open a Photoshop file in Fireworks, a dialog box lets you specify how to import the image. The options you choose determine 
the appearance and editability of imported files. 


1. Specify image dimensions in pixels or percent, and specify pixel resolution. To maintain the current ratio of width to height, select Constrain 
Proportions. 


2. If the Photoshop file contains layer comps, select which version of the image to import. Select Show Preview to display a preview of the 
selected comp. The Comments text box displays comments from the Photoshop file. 
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3. From the bottom pop-up menu, choose how the Photoshop image opens in Fireworks: 


Maintain Layer Editability over Appearance Preserves as much layer structure and text editability as possible without sacrificing the 
appearance of the image. If the file includes features that Fireworks doesn't support, Fireworks preserves the appearance of the document 
by merging and rasterizing layers. Here are some examples: 


e CMYK layers, adjustment layers, and layers that use a Knockout option are merged with underlying layers. 
e Layers that use unsupported layer effects may be merged, depending on the blending mode of the layer and the presence of transparent 


pixels. 


Maintain Photoshop Layer Appearance Flattens all objects on each Photoshop layer, and converts each Photoshop layer into a bitmap 
object. This option removes the ability to edit the Photoshop layers in Fireworks. Layer groups are maintained, however. 


Use Custom Preferences Imports the file using custom file conversion settings you specify in the Preferences dialog box. (See Photoshop 
Import and open preferences.) 


Flatten Photoshop Layers to Single Image Imports the Photoshop file as a flattened image without layers. The converted file retains no 
individual objects. Opacity is retained, but is not editable. 


4. If you used the File > Import command, you can select the following options: 
Include Background Layer Imports objects from the image’s background layer. 
Import Into New Folder Imports the image into a new layer folder labelled Photoshop Import. 

5. If you used the File > Open command or dragged the Photoshop file into Fireworks, you can select the following options: 
Include Guides Retains the Photoshop guides in their original positions. 


Convert Layers to States Places each Photoshop layer group into its own individual state. 


About importing text from Photoshop 
Q To quickly import specific text in a Photoshop file, copy it directly into Fireworks. Copied text retains all text attributes. 


When you import Photoshop files that contain text, Fireworks checks for the necessary fonts on your system. If the fonts aren't installed, Fireworks 
prompts you to either replace them or maintain their appearance. 


If the text in your Photoshop file has effects applied to it that Fireworks supports, the effects are applied in Fireworks. However, because Fireworks 
and Photoshop apply effects differently, the effects may appear different in each application. 


When Photoshop 6 or 7 files that contain text are opened or imported in Fireworks with the Maintain Appearance option selected, a cached image 
of the text is displayed so its appearance remains the same as it was in Photoshop. Once you edit the text, the cached image is replaced with 
actual text. The text appearance might differ from the original text. The original font data is stored in the PNG file, however, so you can use the 
original fonts on systems that them installed. 


Note: Fireworks cannot export text in Photoshop 6 or 7 format. If you edit a document containing Photoshop 6 or 7 text and then export the 
document back to Photoshop, the file is exported in Photoshop 5.5 format. However, if you don't make any change to the text, the file is exported 
in Photoshop 6 format. 


Import/Export Photoshop gradients 
The quality of the gradient after import and export depends on the gradient type. There could also be a slight variation in the color and opacity of 
the gradients. 


Gradient Import Quality 

Linear Near perfect. 

Radial Near perfect. 

Reflected Near perfect. 

Diamond Approximate match (mapped to rectangular) 
Angle Approximate match (mapped to conical) 
Gradient Export Quality 
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Linear Near perfect. 


Radial Near perfect. 

Bars Near perfect. 

Rectangular Approximate match (mapped to diamond) 
Conical Approximate match (mapped to angle) 
Ellipse Approximate match (mapped to radial) 
Ripples Approximate match (mapped to radial) 
Starburst Imperfect match (mapped to shapeburst) 
Contour, satin, waves Imperfect match (mapped to linear) 


Maintain appearance of Adjustment layer after import 
When you import a PSD file containing an adjustment layer, the appearance of the individual layers is maintained after import. 


1. In the Preferences dialog, select Photoshop Import/Open. 


2. Select Maintain Appearance Of Adjusted Layers. 


Maintain appearance of adjusted layers 
When you import a PSD file containing an adjustment layer, the appearance of the individual layers is maintained after import. Ensure that you 
select Custom Setting From Preferences in the dialog box. 


Use Photoshop filters and plug-ins ne 


You can use many Photoshop and other third-party filters and plug-ins, either in the Live Filters window or the Filters menu. 


Note: Plug-ins and filters for Photoshop 5.5 and earlier versions are supported. For more information, see http://www.fireworkszone.com/g-2-536. 
Photoshop 6 or later plug-ins and filters are not compatible with Fireworks. 


Enable Photoshop plug-ins using the Preferences dialog box 
1. Choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). 
2. Click the Plug-Ins category. 


3. Select Photoshop Plug-Ins. 
The Select a Folder (Windows) or Choose a Folder (Mac OS) dialog box opens. 


Note: If the dialog box doesn't open, click Browse. 
4. Navigate to the folder where the Photoshop or other filters and plug-ins are installed, and click Select (Windows) or Choose (Mac OS). 
5. Click OK to close the Preferences dialog box. 


6. Restart Fireworks. 


Enable Photoshop plug-ins using the Live Filters window 


1. Select any vector object, bitmap object, or text block on the canvas and click the plus (+) icon next to the Filters label in the Property 
inspector. 


2. Select Options > Locate Plug-ins from the pop-up menu. 


3. Navigate to the folder where the Photoshop or other filters and plug-ins are installed, and click Select (Windows) or Choose (Mac OS). If a 
message appears asking if you want to restart Fireworks, click OK. 


4. Restart Fireworks to load the filters and plug-ins. 
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Note: Alternatively, you can install plug-ins directly into the Fireworks Plug-ins folder. 


Place Fireworks graphics in Photoshop lg 


Fireworks provides extensive support for exporting files in Photoshop (PSD) format. A Fireworks image exported into Photoshop maintains the 
same editability when reopened in Fireworks as other Photoshop graphics. Photoshop users can work with their graphic in Fireworks and then 
continue editing in Photoshop. 


Q You can use the PSD Save extension to quickly export the pages and states in your Fireworks document as separate PSD files. This extension 
is available at http:/www.adobe.com/go/learn_fw_psdsave_en 


Export a file in Photoshop format 
1. Select File > Save As. 
2. Name your file, and choose Photoshop PSD from the Save As menu. 
3. To specify preset export settings for objects, effects, and text, click Options. Then, choose a preset below from the Settings menu. 
Maintain Editability Over Appearance Converts objects to layers, keeps effects editable, and converts the text to editable Photoshop text 
layers. Select this option if you plan to edit the image extensively in Photoshop and do not need to preserve the exact appearance of the 


Fireworks image. 


Maintain Fireworks Appearance Converts each object into an individual Photoshop layer, and effects and text become non-editable. 
Select this option if you want to maintain control over the Fireworks objects in Photoshop but also want to maintain the original appearance 
of the Fireworks image. 


Smaller Photoshop File Flattens each layer into a fully rendered image. Select this option if you are exporting a file containing a large 
number of Fireworks objects. 


Custom Allows you to choose specific settings for objects, effects, and text. 


4. Click Save to export the Photoshop file. 


Note: Photoshop 5.5 and earlier cannot open files with more than 100 layers. You must delete or merge objects if the Fireworks document 
you are exporting contains more than 100 objects. 


Customize Photoshop export settings 


1. In the Save As dialog box, select Photoshop PSD for the file type, and click Options. 

2. From the Settings pop-up menu, choose Custom. 

3. From the Objects pop-up menu, choose one of the following: 
Convert to Photoshop Layers Converts individual Fireworks objects to Photoshop layers and Fireworks masks to Photoshop layer masks. 
Flatten Each Fireworks Layer Flattens all objects on each individual Fireworks layer, and each Fireworks layer becomes a layer in 
Photoshop. When you choose this option, you lose the ability to edit the Fireworks objects in Photoshop. You also lose features, such as 
blending modes, that are associated with the Fireworks objects. 


4. From the Effects pop-up menu, choose one of the following: 


Maintain Editability Converts Fireworks Live Filters to their equivalent in Photoshop. If the effects do not exist in Photoshop, they are 
discarded. 


Render Effects Flattens effects into their objects. When you choose this option, you preserve the appearance of the effects, but you can't 
edit them in Photoshop. 


5. From the Text pop-up menu, choose one of the following: 
Maintain Editability Converts text to an editable Photoshop layer. Text formatting that is not supported by Photoshop is lost. 


Render Text Turns text into an image object. When you choose this option, you preserve the appearance of the text, but you can't edit it. 
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e Photoshop Import and open preferences 
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Using Fireworks with Illustrator 


Importing Illustrator files containing multiple artboards 


Vector graphics can be easily shared between Fireworks and Adobe Illustrator®. The appearance of objects may differ between applications, 
however, because Fireworks does not share all the same features with all vector graphics applications. 


Fireworks provides support for importing native Illustrator (Al) CS2 and later files, with options for retaining many aspects of the imported files, 
including layers, and patterns. Linked images, however, are not imported. 


You can bring Illustrator images into Fireworks for further editing and web optimization. You can also export Illustrator files from Fireworks. 


When you import Illustrator files, Fireworks preserves the following features: 


Bezier Points The number and position of Bezier points will be preserved. 


Colors Colors are preserved as closely as possible when importing Al content to Fireworks. Fireworks supports the RGB schema only. Schemas 
other than RGB are automatically converted to RGB 8 bit before they are imported into Fireworks. 


Text Attributes: Seamlessly copy text from Illustrator to Fireworks without any change in the look and feel of the text. 


When you import text, Illustrator preserves the following: 


Font 

Size 

Color 

Bold 

Italic 

Align (Left, Right, Center, Justify) 

Orientation (Horizontal, Vertical Left to Right, Vertical Right to Left) 
Letter Spacing 

Character Position (Normal, SuperScript, SubScript) 

Auto kerning 


Kerning pairs 


g To quickly import specific text in an Illustrator file, copy it directly into Fireworks. Copied text retains all text attributes. 


Gradient Fills Gradients are imported as native Fireworks gradients. All of the ramp points of the gradient are preserved. Opacity values 
associated with the gradient fills are also preserved during import. 


Images Illustrator Al files can contain placed files of the following types: PDF, BMP, EPS, GIF, JPEG, JPEG2000, PICT, PCX, PCD, PSD, PXR, 
PNG, TGA and TIFF. Embedded Images are brought into Fireworks as raster images. However, Fireworks cannot open Illustrator Al files that 
contain linked images such as EPS and Al. 


Clip Masks Fireworks supports the import of clipping masks with paths and compound paths at a basic level. 


Filled Strokes Filled strokes are imported as a single drawing object. 


Solid Fills Filled paths are imported as a single drawing object. 


Compound Paths Compound paths are imported as a single drawing object. 


Groups The group is preserved and the individual grouped objects come in as drawing objects. 


Graphs Graphs are imported as groups, and they lose their special editability as graphs. 


Primitives Illustrator primitives are actually paths, so they are not imported as Fireworks primitives. 


Patterns Patterns are imported as individual tiles. These tiles are imported as a native pattern in Fireworks and the pattern is assigned to the 
drawing object. 


Brush Strokes Brush strokes are imported as multiple groups (one group per closed path). 
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Symbols Symbols are imported as normal group objects. 
Transparency Fireworks imports object opacity correctly, preserving object transparency settings at the original Illustrator values. 


Sub Layers Fireworks imports all sublayers as native Fireworks sublayers. 


Importing Illustrator files containing multiple artboards ieee 


You can open an Illustrator file containing multiple artboards by doing one of the following: 
Importing the Illustrator file into Fireworks 
Use the File > Import option to import Adobe Illustrator files containing multiple artboards when you want to import artboards individually. 


When you import an Adobe Illustrator file containing multiple artboards, the Page menu is enabled in the Vector File Options dialog box. Select the 
artboard that you want to import in the Page menu. Each artboard in Illustrator is mapped to a page in Fireworks. For example, artboards 1, 2, and 
3 in the Adobe Illustrator File appear as 1, 2, and 3 in the Page menu. 


Opening the Illustrator file in Fireworks 


To open all the artboards in an Illustrator file, select File > Open, and open the Illustrator file containing the artboards. Because all the artboards 
are imported as separate pages, the File Conversion options are disabled in the Vector File Options dialog box. 


Note: File conversion options are disabled when you import Illustrator files from versions previous to CS3, and for Illustrator files with a single 
artboard. 


(cx Twitter™ and Facebook posts are not covered under the terms of Creative Commons. 
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Using Fireworks with Flash 


Place Fireworks graphics in Flash 
Use Fireworks to edit graphics in Flash 


e You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multi-state button graphics for use in Adobe 
Flash®. 


e TLF text from Flash is copied as a blank bitmap image into Fireworks running on Windows. Convert TLF text to ASCII text and import it into 
Fireworks. 


e Launch-and-edit functionality makes it easy to edit Fireworks graphics from within Flash. When you work in Flash, the launch-and-edit 
preferences you set in Fireworks are always applied. 


e The Flash HTML style does not support pop-up menu code. Fireworks button behaviors and other types of interactivity are not imported into 
Flash. 


. A . To thet 
Place Fireworks graphics in Flash =v 


Importing or copying a Fireworks PNG file offers the most control over how graphics and animations are added to Flash. You can also import 
JPEG, GIF, PNG, and SWF files that have been exported from Fireworks. 


Note: When Fireworks graphics are imported or copied and pasted into Flash, some attributes are lost, such as Live Filters and textures. You 
can't import or copy and paste a contour gradient effect from Fireworks into a Flash document. In addition, Flash supports only solid fills, gradient 
fills, and basic strokes. 


Import Fireworks PNG files into Flash 
You can import Fireworks PNG source files directly into Flash, without having to export to any other graphics format. All Fireworks vectors, 
bitmaps, animations, and multi-state button graphics can be imported into Flash. 


Note: Fireworks button behaviors and other types of interactivity are not imported into Flash because Fireworks behaviors are enabled by 
JavaScript that is external to the file format. Flash uses internal ActionScript code. 


1. Save the document in Fireworks. 

2. Switch to an open document in Flash. 

3. (Optional) Click the key state and layer onto which you want to import the Fireworks content. 
4. Select File > Import. 

5. Navigate to and select the PNG file. 

6. In the Import Fireworks Document dialog box, do one of the following: 


e Select the Import As A Single, Flattened Bitmap option. 


e Select an import option from the two pop-up menus. 
7. Select how to import text. 
8. Click OK. 
Note: Your selections in the Import Fireworks Document dialog box are saved and used as default settings. 
Options for importing Fireworks graphics, vector objects, and text 


Options for importing graphics 


Import As A Single Flattened Bitmap Imports a single, uneditable image. 


Import All Pages Into New States As Movie Clips Imports all of the pages in the PNG file into a new Flash layer that takes the name of the 
PNG file. A key state is created in the new layer at the current state’s location, the first page of the PNG file is placed as a movie clip in this state, 


240 


and all the other pages are placed in states following it as movie clips. The layer hierarchy and states within the PNG file are preserved. 


Import Page 1 Into Current State As Movie Clip The contents of the selected page are imported as a movie clip, which is placed in the active 
state and layer in the Flash file. The layer hierarchy and states within the PNG file are preserved. 


Import All Pages Into New Scenes As Movie Clips Imports all of the pages from the PNG file and maps each one to a new scene as movie 
clips. Any layers and states within the pages are preserved. If scenes already exist in the Flash file, the import process adds the new scenes after 
the existing ones. 


Import Page 1 Into New Layer The selected page is imported as a new layer. States are imported into the timeline as separate states. 


Options for importing vector objects 


Import As Bitmaps To Maintain Appearance Preserves the editability of vector objects, unless they have special fills, strokes, or effects that 
Flash does not support. To preserve the appearance of such objects, Flash converts them to non-editable bitmap images. 


Import As Editable Paths Preserves the editability of all vector objects. If objects have special fills, strokes, or effects that Flash does not 


support, those properties might look different after they are imported. 


Options for importing text 


Import As Bitmaps To Maintain Appearance Preserves the editability of text, unless it has special fills, strokes, or effects that Flash does not 
support. To preserve the appearance of such text, Flash converts it to a non-editable bitmap image. 


Note: TLF text from Flash is copied as a blank bitmap image in Fireworks. 


Keep All Text Editable Preserves the editability of all text. If text objects contain special fills, strokes, or effects that Flash does not support, 
those objects might look different after they are imported. 


Copy or drag Fireworks graphics into Flash 
To copy graphics into versions of Flash earlier than Flash 8, choose Edit > Copy Path Outlines. 


Note: You might have to ungroup the objects (Modify > Ungroup) to make them editable as separate vector objects in Flash. 
1. In Fireworks, select the object or objects to copy. 
2. Select Edit > Copy and choose Copy from the Flash pop-up menu. 
3. In Flash, create a new document and choose Edit > Paste, or drag the file directly from Fireworks to Flash. 
4. In the Import Fireworks Document dialog box, select an Into option: 


Current States As Movie Clip The contents being pasted are imported as a movie clip, which is placed in the active state and layer in the 
Flash file. The layer hierarchy and states within the PNG file are preserved. 


New Layer The pasted content is imported as a new layer. States are imported into the timeline as separate states. 
5. Select how to import vector objects. 
6. Select how to import text. 


7. Click OK. 


Note: Selections in the Import Fireworks Document dialog box are saved and used as default settings. 


About the Flash library structure 
Fireworks objects are imported into a Fireworks Objects Folder in the Flash library. The structure within this folder is as follows: 


File 1 folder // Named with the Fireworks file name 


e Page 1 folder // Named with the page name (if more than one page) 
— Page 1 // Named with the page name 
— — State 1 folder // Named with the state name (if more than one state) 
— — State 1 // Named with the state name 
— — — Symbol 1 in State 1 // Named based on the symbol name 


— — — Symbol 2 in State 1 
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— Shared Layers folder // Shared layers across states in Page 1 
— — Shared Layer folder // Named with the name of the shared layer 
— — Shared Layer symbol 
e Page 2 folder 
— Page 2 


— Symbol 1 in Page 2 (For a page with no states) 


e MasterPage folder 
— MasterPage 


— Symbol 1 in MasterPage 


— Shared Layers folder // Shared layers across pages 
— — Shared Layer folder // Named with the name of the shared layer 


— — Shared Layer symbol 


About importing Fireworks symbols in Flash 
When importing Fireworks symbols in Flash, consider the following issues: 


e If a symbol uses 9-slice scaling, the four slice guides are imported and preserved in Flash. The 9-slice scaling is not preserved for 
animations, however. The imported symbols are saved as symbols in the Flash library. 


e Soft edits that have been applied to rich symbols are lost. The master copy of the symbol is imported. 


e Rich graphic symbols are stored as a PNG file and a JSF file. Only the PNG file is imported. If the symbol is made up of a number of paths, 


the paths are combined into one symbol. 


e To achieve the full functionality of rich symbols in Flash, replace it with the Flash version of the symbol. 


About preserving visibility and locking 


Objects and layers that are hidden in the PNG file are imported and remain hidden in Flash. However non-visible parts of a rich graphic symbol 


are not imported (for example, button Over or Down states). 


If a layer is locked or hidden, all objects and sub-layers within the layer inherit the locked or hidden setting and retain it when they are imported 


into Flash. 


If you import a single page into a new layer in Flash, one layer is created for the entire page and all objects are displayed. Visibility and locking 


attributes are not preserved. 


Supported Photoshop layer effects 

Photoshop Live effect - DropShadow Mapping is as follows: 
e size maps to blurX, blurY 
e distance maps to distance 
e color maps to color 


e angle maps to 180 - (Photoshop Effect angle) 


Photoshop Live effect - InnerShadow Mapping is as follows: 
e size maps to blurX, blurY 
e distance maps to distance 
e color maps to color 


e angle maps to 180 - (Photoshop Effect angle) 


Photoshop Live effect - Outer Glow Mapping is as follows: 
e Opacity maps to strength 


e color maps to color 
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e size maps to blurX, blurY 


Photoshop Live effect - Inner Glow Mapping is as follows: 


e Opacity maps to strength 


e color maps to color 


e size maps to blurX, blurY 


e Objects with any other Photoshop layer effects are rasterized. 


Exporting Fireworks graphics to other formats for use in Flash 
You can export Fireworks graphics as JPEG, GIF, PNG, and Adobe Illustrator 8 (Al) files, and then import them into Flash. 


Although PNG is the native file format for Fireworks, PNG graphic files exported from Fireworks are different from source PNG files you save in 
Fireworks. Like GIFs or JPEGs, exported PNG files contain only image data, with no additional information about slices, layers, interactivity, Live 
Filters, or other editable content. 


Export Fireworks graphics and animations as SWF files 


Fireworks graphics and animations can be exported as Flash SWF files. To retain stroke size and stroke color formatting, choose Maintain 
Appearance in the Flash SWF Export Options dialog box. 


The following formatting is lost during export to SWF format: blend mode, layers, masks (applied before export), slice objects, image maps, 
behaviors, pattern fills, and contour gradients. 


1. 


Select File > Save As. 

Enter a filename and choose a destination folder. 

For the format, select Adobe Flash SWF. 

Click Options. Then select an Objects option: 

Maintain Paths Allows you to maintain path editability. Effects and formatting are lost. 


Maintain Appearance Converts vector objects to bitmap objects as needed and preserves the appearance of applied strokes and fills. 
Editability is lost. 


Select a Text option: 

Maintain Editability Allows you to maintain text editability. Effects and formatting are lost. 

Convert to Paths Converts text to paths, preserving any custom kerning or spacing you entered in Fireworks. Editability as text is lost. 
Set the quality of JPEG images, using the JPEG Quality pop-up slider. 

Select the states to be exported and the state rate in seconds. 


Click OK, and then click Save in the Export dialog box. 


Export 8-bit PNG files with transparency 
To export 32-bit PNG files with transparency, simply import Fireworks PNG source files directly into Flash. To export 8-bit PNG files with 
transparency, complete the following procedure: 


T; 


In Fireworks, choose Window > Optimize to open the Optimize panel. 

Select PNG 8 as the Export file format and Alpha Transparency from the Transparency pop-up menu. 
Select File > Export. 

Select Images Only from the Save A Type pop-up menu. 


Name and save the file. 


Import exported Fireworks graphics and animations into Flash 


E 


Create a new document in Flash. 
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Note: If you are importing a Fireworks graphic into an existing Flash file, create a new layer in Flash. 
2. Select File > Import, and locate the graphic or animation file. 


3. Click Open to import the file. 


Use Fireworks to edit graphics in Flash ae 


With launch-and-edit integration, you can use Fireworks to change a graphic that you previously imported into Flash, even if the graphic wasn't 
exported from Fireworks. 


Note: Fireworks-native PNG files imported into Flash are an exception; the PNG file must have been imported as a flattened bitmap image. 


If the graphic was exported from Fireworks, and you saved the original PNG file, you can edit the PNG file in Fireworks from inside Flash. When 
you return to Flash, both the PNG file and the graphic in Flash are updated. 


1. In Flash, right-click (Windows) or Control-click (Mac OS) the graphic file in the Document Library panel. 


2. Select Edit With Fireworks from the pop-up menu. 


Note: If Edit with Fireworks does not appear in the pop-up menu, choose Edit With and locate your Fireworks application. 
3. Click Yes in the Find Source box to locate the original PNG file for your Fireworks graphic, and click Open. 


4. Edit the image, and click Done when finished. 
Fireworks exports a new graphic file to Flash and saves the original PNG file. 


e Launch and Edit preferences 
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Using Fireworks with Dreamweaver 


Place Fireworks images in Dreamweaver files 

Place Fireworks HTML code in Dreamweaver 

Edit Fireworks files from Dreamweaver 

Optimize Fireworks images and animations placed in Dreamweaver 
Set launch-and-edit options 

Transferring site files with the File Management button 


Adobe Dreamweaver® and Fireworks recognize and share many of the same file edits, including changes to links, image maps, and table slices. 
And, Dreamweaver and Fireworks provide a streamlined workflow for editing, optimizing, and placing web graphics files in HTML pages. 


š š . . To thet 
Place Fireworks images in Dreamweaver files seen are 


When you insert Fireworks JPEG files in Dreamweaver, the quality of the file is automatically calculated. The value can be 79 for some of the files. 


Note: Before using any of these procedures, be sure that Dreamweaver is selected as the HTML type in the HTML Setup dialog box. 


Insert Fireworks images into Dreamweaver using the Files panel 


1. Export your image from Fireworks to the local site folder as defined in Dreamweaver. 
2. Open the Dreamweaver document and make sure you are in Design view. 


3. Drag the image from the Files panel into the Dreamweaver document. 


Insert Fireworks images into Dreamweaver using the Insert menu 


1. Place the insertion point where you want the image to appear in the Dreamweaver document window. 
2. Do one of the following: 


e Select Insert > Image. 


e Click the Images: Image button in the Common category of the Insert bar. 


3. Navigate to the image you exported from Fireworks, and click OK. 


Create new Fireworks files from Dreamweaver placeholders 
Image placeholders let you experiment with various web page layouts before creating the final artwork for your page. Use image placeholders to 
specify the size and position of Fireworks images to be placed in Dreamweaver in the future. 


When you create a Fireworks image from a Dreamweaver image placeholder, a new Fireworks document is created with a canvas of the same 
dimensions as the selected placeholder. 


Note: All behaviors applied within Fireworks are preserved upon export back to Dreamweaver. Likewise, most Dreamweaver behaviors applied to 
image placeholders are also preserved during launch-and-edit with Fireworks. There is one exception, however: disjoint rollovers applied to image 
placeholders in Dreamweaver are not preserved when opened and edited in Fireworks. 


Once the Fireworks session has ended and you've returned to Dreamweaver, the new Fireworks graphic you created takes the place of the image 
placeholder originally selected. 


1. In Dreamweaver, save the desired HTML document to a location inside your Dreamweaver site folder. 
2. Position the insertion point in the desired position in your document, and do one of the following: 


e Select Insert > Image Objects > Image Placeholder. 


e Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Image Placeholder. 


3. Enter the name, dimensions, color, and alternate text for the image placeholder. 


An image placeholder is inserted into the Dreamweaver document. 
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4. Do one of the following: 


e Select the image placeholder and click Create in the Property inspector. 
e Control-double-click (Windows) or Command-double-click (Mac OS) the image placeholder. 
e Right-click (Windows) or Control-click (Mac OS) and choose Create Image in Fireworks. 
Fireworks opens with an empty canvas that is exactly the same size as the placeholder image. The top of the Document window 
indicates that you are editing an image from Dreamweaver. 
5. Create an image in Fireworks and click Done. 


6. Specify a name and location for the source PNG file. 


7. Specify a name for the exported image files. 


These are the image files that are displayed in Dreamweaver. 


8. Specify a location within your Dreamweaver site folder for the exported image file or files, and then click Save. 


When you return to Dreamweaver, the image placeholder you originally selected is replaced with the new Fireworks image or table. 


m m To thet 
Place Fireworks HTML code in Dreamweaver oe 


Exporting Fireworks files to Dreamweaver is a two-step process. From Fireworks, export files directly to a Dreamweaver site folder. This generates 
an HTML file and the associated image files in the location you specify. Then place the HTML code into Dreamweaver, using the Insert Fireworks 
HTML feature. 

1. Export the Fireworks HTML document to HTML format. 

2. In Dreamweaver, save your document in a defined site. 

3. Place the insertion point in the document where you want the inserted HTML code to begin. 


4. Do one of the following: 


e Select Insert > Image Objects > Fireworks HTML. 


e Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Fireworks HTML. 
5. In the dialog box that appears, click Browse to choose the desired Fireworks HTML file. 


6. (Optional) Select Delete File After Insertion to move the HTML file to the Recycle Bin (Windows) or to permanently delete it (Mac OS) when 
the operation is complete. 
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This option does not affect the source PNG file associated with the HTML file. 


7. Click OK to insert the HTML code, along with its associated images, slices, and JavaScript, into the Dreamweaver document. 


Copy Fireworks HTML code for use in Dreamweaver 

When you copy Fireworks HTML code to the clipboard, all HTML and JavaScript code associated with the Fireworks document is copied into the 
Dreamweaver document, images are exported to a location you specify, and Dreamweaver updates the HTML with document-relative links to 
those images. 


Note: This method works only with Dreamweaver. It does not work with other HTML editors. 


e Copy the HTML to the clipboard in Fireworks, and then paste it into a Dreamweaver document. 


Q You can also open an exported Fireworks HTML file in Dreamweaver and then copy and paste the desired sections into another Dreamweaver 
document. 


Update Fireworks HTML exported to Dreamweaver 
Q Roundtrip HTML provides many benefits when working with HTML exported to Dreamweaver. (See About Roundtrip HTML.) 


1. Make changes to the PNG document in Fireworks. 
2. Select File > Update HTML. 
3. Navigate to the Dreamweaver file containing the HTML you want to update, and click Open. 


4. Navigate to the folder where you want to place the updated image files, and click Open. 


Fireworks updates the HTML and JavaScript code in the Dreamweaver document. Fireworks also exports updated images associated with 
the HTML and places the images in the specified destination folder. 


Note: If Fireworks cannot find matching HTML code to update, you have the option of inserting new HTML code into the Dreamweaver 
document. Fireworks places the JavaScript section of the new code at the beginning of the document and places the HTML table or link to 
the image at the end. 


Export Fireworks files to Dreamweaver libraries 

A library item is a portion of an HTML file located in a folder named Library in your site root folder. Library items appear as a category in the 
Dreamweaver Assets panel. In Dreamweaver, library items simplify editing and updating frequently used website components. You can drag a 
library item (a file with the .lbi extension) from the Assets panel to any page in your website. 


You can't edit a library item directly in the Dreamweaver document; you can edit only the master library item. Then, you can have Dreamweaver 
update every copy of that item as it is placed throughout your website. Dreamweaver library items are much like Fireworks symbols; changes to 
the master library (LBI) document are reflected in all library instances across your site. 


Note: Dreamweaver library items do not support pop-up menus. 
1. Select File > Export. 


2. Select Dreamweaver Library from the Export pop-up menu. 
Select or create a folder named Library in your Dreamweaver site as the location for the files. The name is case-sensitive. 


Note: Dreamweaver does not recognize the exported file as a library item unless it is saved into the Library folder. 
3. Type a filename. 
4. (Optional) If your image contains slices, choose slicing options. 
5. Select Put Images In Subfolder to choose a separate folder for saving images. 


6. Click Save. 


. z š To the to 
Edit Fireworks files from Dreamweaver P 
The Roundtrip HTML feature tightly integrates Fireworks and Dreamweaver. It allows you to make changes in one application and have those 
changes seamlessly reflected in the other. 


About Roundtrip HTML 
Fireworks recognizes and preserves most types of edits made to a document in Dreamweaver, including changed links, edited image maps, edited 
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text and HTML in HTML slices, and behaviors shared between Fireworks and Dreamweaver. The Property inspector in Dreamweaver helps you 
identify Fireworks-generated images, table slices, and tables in a document. 


Fireworks supports most types of Dreamweaver edits. However, major changes to a table's structure in Dreamweaver can create irreconcilable 
differences between the two applications. When making considerable changes to a table layout, use the Dreamweaver launch-and-edit feature to 
edit the table in Fireworks. 


Note: Using Fireworks technology, Dreamweaver provides basic image-editing features for modifying images without an external image-editing 
application. Dreamweaver image-editing features apply only to JPEG and GIF image file formats. 


Edit a Fireworks image placed in Dreamweaver 
Note: Before editing Fireworks graphics from Dreamweaver, perform some preliminary tasks. For more information, see Set launch-and-edit 
options. 
1. In Dreamweaver, choose Window > Properties to open the Property inspector. 
2. Do one of the following: 
e Select the desired image. (The Property inspector identifies the selection as a Fireworks image and displays the name of the known 
PNG source file for the image.) Then click Edit in the Property inspector. 
e Control-double-click (Windows) or Command-double-click (Mac OS) the image you want to edit. 


e Right-click (Windows) or Control-click (Mac OS) the desired image, and choose Edit With Fireworks from the context menu. 
3. If prompted, specify whether to locate a source Fireworks file for the placed image. 


4. In Fireworks, edit the image. 
The edits you apply are preserved in Dreamweaver. 

5. Click Done to export the image using the current optimization settings, update the GIF or JPEG file used by Dreamweaver, and save the 
PNG source file if a source file was selected. 


Note: When you open an image from the Dreamweaver Site panel, the default editor for that image type, which is set in Dreamweaver 
Preferences, opens the file. When images are opened from this location, Fireworks does not open the original PNG file. To use the 
Fireworks integration features, open images from within the Dreamweaver Document window. 


Edit a Fireworks table placed in Dreamweaver 
Note: Before editing Fireworks tables from Dreamweaver, perform some preliminary launch-and-edit tasks. For more information, see Set launch- 
and-edit options. 
1. In Dreamweaver, choose Window > Properties to open the Property inspector. 
2. Do one of the following to open the source PNG file in the document window: 
e Click inside the table, and click the TABLE tag in the status bar to select the entire table. (The Property inspector identifies the selection 
as a Fireworks table and displays the name of the known PNG source file for the table.) Then click Edit in the Property inspector. 
e Select an image in the table, and click Edit in the Property inspector. 


e Right-click (Windows) or Control-click (Mac OS) the image, and then choose Edit With Fireworks from the context menu. 


3. In Fireworks, make the edits. 


Dreamweaver recognizes and preserves all edits applied to the table in Fireworks. 


4. When you have finished editing the table, click Done in the document window. 


The HTML and image slice files for the table are exported using the current optimization settings, the table placed in Dreamweaver is 
updated, and the PNG source file is saved. 


Note: You can get a Dreamweaver error if you nest another table inside the original Fireworks-generated table and then try to edit the table 
using Roundtrip editing in Dreamweaver. For more information, see TechNote 19231 on the Adobe website. 


About supported and non-supported Dreamweaver behaviors 

If a single, unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied, that graphic will have a 
slice on top of it when it is opened and edited in Fireworks. The slice is not visible initially, because slices are automatically turned off when you 
open and edit single, unsliced graphics to which Dreamweaver behaviors are applied. You can view the slice by turning on its visibility from the 
Web Layer of the Layers panel. 
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When you view properties for a slice in Fireworks that has a Dreamweaver behavior attached, the Link text box in the Property inspector might 
display javascript: ;. Deleting this text is harmless. You can type over it to enter a URL if desired, and the behavior will still be intact when you 
return to Dreamweaver. 


When you work with Roundtrip HTML from Dreamweaver, Fireworks supports server-side file formats such as CFM and PHP. 
Dreamweaver supports all behaviors applied in Fireworks, including those required for rollovers and buttons. 
Note: Dreamweaver library items do not support pop-up menus. 


Fireworks supports the following Dreamweaver behaviors during a launch-and-edit session: 


e Simple Rollover 

e Swap Image 

e Swap Image Restore 
e Set Text of Status Bar 
e Set Nav Bar Image 

e Pop-up Menu 


Note: Fireworks does not support nonnative behaviors, including server-side behaviors. 


ae à > š $ . To thet 
Optimize Fireworks images and animations placed in Dreamweaver PER 
Change optimization settings for a Fireworks image placed in Dreamweaver 


1. In Dreamweaver, select the image and do one of the following: 


e Select Commands > Optimize Image. 
e Click the Optimize button in the Property inspector. 


e Right-click (Windows) or Control-click (Mac OS) and choose Optimize In Fireworks from the pop-up menu. 
2. If prompted, specify whether to open a Fireworks source file for the placed image. 
3. Make edits in the Export Preview dialog box: 


e To edit optimization settings, click the Options tab. 


e To edit the size and area of the exported image, click the File tab. If you change image dimensions in Fireworks, you must reset the size 
of the image in the Property inspector when you return to Dreamweaver. 


e To edit animation settings for the image, click the Animation tab. 


4. When you have finished editing the image, click OK to export the image, update the image in Dreamweaver, and save the PNG. 


If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image. 


Change animation settings 


If you are opening and optimizing an Animated GIF file, you can also edit the animation settings. The animation options in the Export Preview 
dialog box are similar to those available in the Fireworks States panel. 


Note: To edit individual graphic elements within a Fireworks animation, you must open and edit the Fireworks animation. 
To the top 


Set launch-and-edit options 


To use Roundtrip HTML effectively, you should perform some preliminary tasks, such as setting Fireworks as your primary image editor in 
Dreamweaver, specifying launch-and-edit preferences in Fireworks, and defining a local site in Dreamweaver. 


Set Fireworks as the primary external image editor for Dreamweaver 


Dreamweaver provides preferences for automatically starting specific applications to edit specific file types. To use the Fireworks launch-and-edit 
features, make sure that Fireworks is set as the primary editor for GIF, JPEG, and PNG files in Dreamweaver. 


Note: Setting this preference is necessary only if you're having trouble starting Fireworks from within Dreamweaver. 


1. In Dreamweaver, choose Edit > Preferences and then choose File Types/Editors. 


249 


2. In the Extensions list, select a web image filename extension (.gif, .jpg, or .png). 


3. In the Editors list, select Fireworks. If Fireworks is not in the list, click the Plus (+) button, locate the Fireworks application on your hard disk, 
and click Open. 
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4. Click Make Primary. 


5. Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types. 


Set launch-and-edit preferences for Fireworks source files 
The Fireworks launch-and-edit preferences let you specify how to handle source PNG files when opening Fireworks files from another application. 


Dreamweaver recognizes the Fireworks launch-and-edit preferences only when you are opening and optimizing an image that is not part of a 
Fireworks table and that does not contain a correct Design Note path to a source PNG file. In all other cases, including all launch-and-edit cases 
of Fireworks images, Dreamweaver automatically opens the source PNG file and prompts you to locate the source file if it cannot be found. 


1. In Fireworks, choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). 


2. Click the Launch And Edit category, and set options as desired. 


For more information, see Launch and Edit preferences. 


About Design Notes and source files 

Whenever you export a Fireworks file from a saved source PNG file to a Dreamweaver site, Fireworks writes a Design Note that contains 
information about the PNG file. When you open and edit a Fireworks image from within Dreamweaver, Dreamweaver uses the Design Note to 
locate the source PNG for that file. For best results, always save your Fireworks source PNG file and exported files in a Dreamweaver site. This 
ensures that any user sharing the site can locate the source PNG when starting Fireworks from within Dreamweaver. 


To the top 


Transferring site files with the File Management button 


The File Management button ZÊ, located at the top of the document window provides easy access to file-transfer commands. Use this button if 
your document resides in a Dreamweaver site folder and the site has access to a remote server. For Fireworks to recognize the folder as a site, 
use the Manage Site dialog box in Dreamweaver to define the target folder (or a containing folder) as a site's local root folder. 


Note: Before using check-in and check-out options in Fireworks, select the Enable File Check In And Check Out option for the Dreamweaver site 
in which the document resides. 


Get Copies the remote version of the file to the local site, overwriting the local file with the remote copy. 
Check Out Checks the file out, overwriting the local file with the remote copy. 

Put Copies the local version of the file to the remote site, overwriting the remote file with the local copy. 
Check In Checks the local file in, overwriting the remote file with the local copy. 


Undo Check Out Undoes Check Out of the local file and checks it in, overwriting the local file with the remote copy. 
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Note: File Management commands are enabled in Fireworks only if your document resides in a Dreamweaver site folder with a remote server 
defined. Fireworks File Management commands can be used only for files that reside in sites that use the Local/Network and FTP transport 
methods. Files in sites that use SFTP or third-party transport methods such as SourceSafe, WebDAV, and RDS cannot be transported to and from 
the remote server from within Fireworks. 


(cc. Twitter™ and Facebook posts are not covered under the terms of Creative Commons. 
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Previewing Fireworks documents in mobile emulators 


Preview Fireworks documents in Device Central 
Create Fireworks document based on a selected mobile device 
Create Fireworks document based on selected mobile devices 


Fireworks documents can be previewed in the various mobile emulators available in Device Central. Device Central is automatically installed along 
with Fireworks. 


a r . r To the t 
Preview Fireworks documents in Device Central il 


1. Create the document that you want to preview in Fireworks. You can also create a document with a set of pages, and preview each page 
separately. 


2. Select File > Preview In Device Central. 
3. In Device Central, preview the document in various devices listed in the Test Devices panel. 


The background color of the page is used as the background color during preview. If the background is set to transparent, the background color 
appears white during preview. 


Use the various options in Device Central when previewing the document. For more information, refer to the Video Tutorial on Adobe TV. 


Š à Ş To thet 
Create Fireworks document based on a selected mobile device ee 


Use the following procedure when you are creating a document for a specific mobile device. 
1. Select File > Device Central. 
2. In the Test Devices panel of the Device Central window, select the device for which you want to create the Fireworks document. 


Note: Ifyou want to create a Fireworks document whose size is slightly different from the specified mobile panel size, select Use Custom 
Size. Modify the values as required. 


3. Click Create. 
4. A document with the selected size opens in Fireworks. 


For more information, refer to the Video Tutorial on Adobe TV. 


s A a To thet 
Create Fireworks document based on selected mobile devices mene 


Use the following procedure when you are creating a document for a set of mobile devices with the same dimensions. 
1. Select File > Device Central. 
2. In the Test Devices panel of the Device Central window, select the devices for which you want to create the Fireworks document. 


Note: When you select devices of different sizes, Device Central creates groups containing devices of similar size. These groups are 
displayed in the Matching Size Presets panel. 


3. In the Matching Size Presets panel, select the group for which you want to create a Fireworks document. 
4. Click Create. 
5. A document with the selected size opens in Fireworks. 


For more information, refer to the Video Tutorial on Adobe TV. 
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Share image metadata with Adobe XMP 


Add metadata using the File Info dialog box 
Work with metadata templates 
Import metadata into a document 


Adobe XMP (eXtensible Metadata Platform) lets you add file information to saved PNG, GIF, JPEG, Photoshop, and TIFF files. XMP facilitates the 
exchange of metadata such as author, copyright, and keywords between Adobe applications. 


1. Choose File > File Info 
2. Do any of the following: 
e To add metadata, see Add metadata using the File Info dialog box. 
e To create new metadata categories, see Work with metadata templates. 


e To import metadata from an existing XML file, see Import metadata into a document. 


Add metadata using the File Info dialog box ii 


The File Info dialog box displays camera data, other file properties, an edit history, copyright, and author information. The File Info dialog box also 
displays custom metadata panels. You can add metadata directly in the File Info dialog box. If you select multiple files, the dialog box shows 
where different values exist for a text field. Any information you enter in a field overrides existing metadata and applies the new value to all 
selected files. 

Note: You can also view metadata in the Metadata panel, in certain views in the Content panel, and by placing the pointer over the thumbnail in 
the Content panel. 


1. Select one or more files. 
2. Choose File > File Info. 
3. Select any of the following from the tabs at the top of the dialog box: 


Q Use the Right and Left arrows to scroll the tabs, or click the down-pointing arrow and choose a category from the list. 


Description Lets you enter document information about the file, such as document title, author, description, and keywords that can be used 
to search for the document. To specify copyright information, select Copyrighted from the Copyright Status pop-up menu. Then enter the 
copyright owner, notice text, and the URL of the person or company holding the copyright. 


IPTC Includes four areas: IPTC Content describes the visual content of the image. IPTC Contact lists the contact information for the 
photographer. IPTC Image lists descriptive information for the image. IPTC Status lists workflow and copyright information. 


Camera Data Includes two areas: Camera Data 1 displays read-only information about the camera and settings used to take the photo, 
such as make, model, shutter speed, and f-stop. Camera Data 2 lists read-only file information about the photo, including pixel dimensions 
and resolution. 


Video Data Lists information about the video file, including video frame width and height, and lets you enter information such as tape name 
and scene name. 


Audio Data Lets you enter information about the audio file, including the title, artist, bit rate, and loop settings. 
Mobile SWF Lists information about mobile media files, including title, author, description, and content type. 
Categories Lets you enter information based on Associated Press categories. 


Origin Lets you enter file information that is useful for news outlets, including when and where the file was created, transmission 
information, special instructions, and headline information. 


DICOM Lists patient, study, series, and equipment information for DICOM images. 


History Displays Adobe Photoshop history log information for images saved with Photoshop. The History option appears only if Adobe 
Photoshop is installed. 


Illustrator Lets you apply a document profile for print, web, or mobile output. 


Advanced Displays fields and structures for storing metadata by using namespaces and properties, such as file format and XMP, Exif, and 
PDF properties. 


Raw Data Displays XMP text information about the file. 


4. Type the information to add in any displayed field. 
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5. Click OK to apply the changes. 


Work with metadata templates aerere 


You can create new metadata templates in Adobe Bridge by using the Create Metadata Template command. You can also modify the metadata in 
the File Info dialog box and save it as a text file with a .xmp filename extension. You share XMP files with other users or apply them to other files. 


You can save metadata in a template to use to populate metadata in Adobe InDesign documents and other documents created with XMP-enabled 
software. Templates you create are stored in a shared location that all XMP-enabled software can access. 


Q To see your XMP templates, open the File Info dialog box, click the Import button, and choose Show Templates Folder. 


Create a metadata template 
1. Do one of the following: 
e Choose Tools > Create Metadata Template. 
e Choose Create Metadata Template from the Metadata panel menu. 
2. Enter a name in the Template Name box. 


3. Select metadata to include in the template from the fields in the Create Metadata Template dialog box, and enter values for the metadata in 
the boxes. 


Note: Ifyou select a metadata option and leave the corresponding box empty, Adobe Bridge clears existing metadata when you apply the 
template. 


4. Click Save. 


Save metadata in the File Info dialog box as an XMP file 
1. Choose File > File Info. 
2. Choose Export from the pop-up menu at the bottom of the dialog box. 


3. Type a filename, choose a location for the file, and click Save. 


Show or delete metadata templates 
1. To show metadata templates in Windows Explorer (Windows) or the Finder (Mac OS), do either of the following: 


e Choose Tools > Create Metadata Template. Click the pop-up menu in the upper-right corner of the Create Metadata template dialog box 
and choose Show Templates Folder. 


e Choose File > Info. Click the pop-up menu at the bottom of the File Info dialog box and choose Show Templates Folder. 


2. Select the template you want to delete and press Delete, or drag it to the Recycle Bin (Windows) or the Trash (Mac OS). 


Apply metadata templates to files in Adobe Bridge 
1. Select one or more files. 
2. Choose either of the following commands from the Metadata panel menu or the Tools menu: 


e Append Metadata, followed by the name of the template. This command applies the template metadata only where no metadata value or 
property currently exists in the file. 


e Replace Metadata, followed by the name of the template. This command completely replaces any existing metadata in the file with the 
metadata in the template. 


Edit metadata templates 
1. Do either of the following: 


e Choose Tools > Edit Metadata Template, followed by the name of the template. 
e Choose Edit Metadata Template, followed by the name of the template, from the Metadata panel menu. 
2. Enter new values for the metadata in any of the boxes. 


3. Click Save. 


. To thet 
Import metadata into a document il 
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1. Select one or more files. 
2. Choose File > File Info. 


3. Choose Import from the pop-up menu at the bottom of the dialog box. 
Note: You must save a metadata template before you can import metadata from a template. 


4. Specify how you want to import the data: 
Clear Existing Properties And Replace With Template Properties Replaces all metadata in the file with the metadata in the XMP file. 


Keep Original Metadata, But Replace Matching Properties From Template Replaces only metadata that has different properties in the 
template. 


Keep Original Metadata, But Append Matching Properties From Template (Default) Applies the template metadata only where no 
metadata value or property currently exists in the file. 


5. Click OK. 


6. Navigate to the XMP text file and click Open. 
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Using Fireworks with Director 


Place Fireworks files in Director 
Edit Director cast members in Fireworks 


Fireworks lets you export graphics and interactive content into Director®. This lets Director users take advantage of the optimization and graphic 
design tools of Fireworks without compromising quality. 


e The export process preserves the behaviors and slices of the graphic. 
e You can export sliced images with rollovers 


Note: The Director HTML style does not support pop-up menu code. 


a á å m To the to 
Place Fireworks files in Director P 


Director can import flattened images from Fireworks, such as JPEG and GIF images. It can also import 32-bit PNG images with transparency. For 
sliced, interactive, and animated content, Director can import Fireworks HTML. 


For information on exporting flattened Fireworks images such as JPEG and GIF images, see Fireworks Help. 


Export 32-bit PNG images with transparency 
1. In Fireworks, choose Window > Optimize, change the export file format to PNG 32, and set Matte to transparent. 
2. Select File > Export. 
3. Select Images Only from the Save As Type pop-up menu. 
4 


. Name and save the file. 


Export layered and sliced Fireworks content to Director 
By exporting Fireworks slices to Director, you can export sliced and interactive content such as buttons and rollover images. By exporting layers to 
Director, you can export layered Fireworks content such as animations. 


1. In Fireworks, choose File > Export. 
2. In the Export dialog box, type a filename and choose a destination folder. 
3. Select Director from the Save As pop-up menu. 
4. Select a Source option: 
Fireworks Layers Exports each layer in the document. Select this option if you are exporting layered content or an animation. 


Fireworks Slices Exports the slices in the document. Select this option if you are exporting sliced or interactive content such as rollover 
images and buttons. 


5. To automatically crop the exported images to fit the objects on each state, select Trim Images. 


6. Select Put Images In Subfolder to choose a folder for images. 


Import a flattened Fireworks image into Director 
1. In Director, choose File > Import. 
2. Navigate to the desired file and click Import. 
3. (Optional) Change options in the Image Options dialog box. For information about each option, see Using Director. 


4. Click OK to display the imported graphic in the cast as a bitmap. 


Import layered, sliced, or interactive Fireworks content 
1. In Director, choose Insert > Fireworks > Images from Fireworks HTML. 
Note: The location and name of this menu command might be different, depending on your version of Director. 


2. Locate the Fireworks HTML file you exported for use in Director. 
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3. (Optional) Change options in the Open Fireworks HTML dialog box. 
Color Specifies a color depth for the imported graphics. If they contain transparency, choose 32-bit color. 
Registration Sets the registration point for the imported graphics. 
Import Rollover Behaviors As Lingo Converts Fireworks behaviors to Lingo code. 
Import To Score Places cast members into the Score upon import. 
4. Click Open. 
The graphics and code from the Fireworks HTML file are imported. 


Note: Ifyou are importing a Fireworks animation, drag keystates in Director to offset the timing of each imported layer as necessary. 


Edit Director cast members in Fireworks ee 
Start Fireworks to edit a Director cast member 
1. In Director, right-click (Windows) or Control-click (Mac OS) the graphic in the Cast window. 
2. Select Launch External Editor from the pop-up menu. 
Note: To set Fireworks as the external editor for bitmap graphics, in Director, choose File > Preferences > Editors and set Fireworks. 
The file opens in Fireworks, and the top of the document window indicates that you are editing a file from Director. 
3. Make changes and click Done when finished. 
Fireworks exports the new graphic to Director. 


Using launch-and-edit integration, you can change Director cast members by starting Fireworks to edit them from inside Director. You can 
also start Fireworks from inside Director to optimize cast members. 


Optimize cast members in Director 
Start Fireworks from Director to preview optimization changes for selected cast members. 


1. In Director, select the cast member in the Cast window and click Optimize in Fireworks on the Bitmap tab of the Property inspector. 
2. In Fireworks, change the optimization settings. 
3. Click Update when finished. If the MIX Editing dialog box appears, click Done. 


More Help topics 
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Using Fireworks with HomeSite, GoLive, and other HTML editors 


Place Fireworks images in HomeSite 

Place Fireworks HTML in HomeSite 

Edit Fireworks images in HomeSite 

Working with GoLive and other HTML editors 


Fireworks and Adobe HomeSite® share a powerful integration that allows you to start Fireworks from HomeSite to edit web graphics. When you 
exit Fireworks, the updates you made are automatically applied to the placed image in HomeSite. Together, the two applications provide a 
streamlined workflow for editing web graphics in HTML pages. 


= š & x To thet 
Place Fireworks images in HomeSite ER 


After you export GIF or JPEG images from Fireworks, you can insert them into a HomeSite document. 
1. In HomeSite, save your document (required to create relative paths to images). 
2. In the Resources window, locate and select the Fireworks image you exported. 
3. Do one of the following to insert the Fireworks image in your HomeSite document: 
e Drag the file from the Resources window to the desired location within the HTML code on the Edit tab of the document window. 


e On the Edit tab of the document window, place the insertion point where you want to insert the Fireworks image, and then right-click the 
file in the Resources window and choose Insert as Link. 


A link to the Fireworks image is created in the HTML code. Click the Browse tab to preview your image within the HomeSite document. 


Place Fireworks HTML in HomeSite To the top 


Note: Before exporting, copying, or updating Fireworks HTML for use in HomeSite, set the HTML type to Generic in the HTML Setup dialog box. 
For more information, see Fireworks Help. 


Export Fireworks HTML to HomeSite 
Exporting HTML from Fireworks generates an HTML file and the associated image files in the location you specify. You can then open the HTML 
file in HomeSite for further editing. 


& Export your document to HTML in Fireworks, and then open the exported file in HomeSite by choosing File > Open. 


Copy Fireworks HTML to the Clipboard for use in HomeSite 
Copy Fireworks-generated HTML to the Clipboard from Fireworks, and then paste it directly into a HomeSite document. All required images are 
exported to a location you specify. 


“* Copy HTML to the Clipboard in Fireworks, and then paste it into a new HomeSite document. 


Copy code from an exported Fireworks file and paste it into HomeSite 
& Export a Fireworks HTML file, and then copy and paste the desired code into an existing HomeSite document. 


Update Fireworks HTML that was exported to HomeSite 
& Use the Update HTML command in Fireworks. 


Edit Fireworks images in HomeSite ae 


1. In HomeSite, save your document. 

2. Do one of the following: 
e Right-click the image file on one of the Files tabs in the Resources window. 
e Right-click the image on the Thumbnails tab of the Results window. 


e Right-click the associated img tag in the HTML code on the Edit tab of the document window. 
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3. Select Edit In Fireworks from the pop-up menu. 
HomeSite starts Fireworks, if it is not already open. 


4. If prompted, specify whether to locate a Fireworks source file for the placed image. For more information on Fireworks source PNG files, see 
Fireworks Help. 


5. In Fireworks, edit the image. 
The document window indicates that you are editing a Fireworks image from another application. 
6. When you are finished making edits, click Done in the Document window. 


The updated image is exported back to HomeSite, and the PNG source file is saved if a source file was selected. 


Working with GoLive and other HTML editors cies 


Fireworks generates pure HTML that can be read by all HTML editors, and it can also import HTML content. This capacity lets you open and edit 
almost any HTML document within Fireworks. 


You can export and copy Fireworks HTML to GoLive the same way you can with most other HTML editors. The only exception is that you must 
choose GoLive HTML as your HTML style before you export or copy HTML from Fireworks. 


Note: The GoLive HTML style does not support pop-up menu code. If your Fireworks document contains pop-up menus, choose Generic HTML 
as the HTML style before exporting. 
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Automating tasks 
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Batch-processing 


Batch-processing workflow 

Change optimization settings during batch-processing 
Change filenames during batch-processing 

Scaling graphics during batch-processing 

Find and replace during batch-processing 

Using commands for batch-processing 


Batch-processing is a convenient way to automatically convert a group of graphic files. Use any of the batch-processing options: 


Convert a selection of files to another format. 

Convert a selection of files to the same format with different optimization settings. 

Scale exported files. 

Find and replace text, colors, URLs, fonts, and non-Web216 colors. 

Rename groups of files by any combination of adding a prefix, adding a suffix, replacing a substring, and replacing blanks. 


Perform commands on a selection of files. 


For more information, see Specify the location for saving backup files. 


Batch-processing workflow 


To the top 


1. Select File > Batch Process, and select the files to process. 


e Files can be from different folders. 
e Currently open documents can be included in the batch. 
e You can save the batch-processing script for use later without adding any files. 


Note: If the files you select are locked or checked in from a Dreamweaver site, you are prompted to unlock them or check them out 
before proceeding. 


2. Select which files to add or remove by clicking in the Batch (Windows) or Batch Process (Mac OS) dialog box: 


Add Adds selected files and folders to the list of files to batch-process. If a folder is selected, all valid, readable files in the folder are added 
to the batch process. 

Note: Valid files are files that have been created, named, and saved. If the latest file version is not saved, you are asked to save it, and 
you can then continue the batch process. If you don’t save the file, the entire batch process ends. 


Add All Adds all valid files in the currently selected folder to the list of files to batch-process. 


Remove Removes selected files from the list of files to batch-process. 


. To add all currently open files, select Include Current Open Files. 


These files do not appear in the list of files to batch-process, but they are included in the process. 


4. Click Next, and then do one or both of the following: 


e To add a task to the batch, select it in the Batch Options list and click Add. 
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Batch Process 
Batch options: Include in batch: = 
Export T 
Scale 
Find and hers 


E Commands 


Rename; 
[C] Replace: 


[C] Replace blanks with: 
[C] Add Prefix: 


[C] Add Suffix: 


e To reorder the list, select the task in the Include In Batch list and click the up and down arrow buttons. 


Note: Export and Rename are always performed last. The other tasks are performed in the order in which they appear. 
. To view extra options for a task, select the task in the Include In Batch list. 
. Select settings for each extra option. To remove a task from the list, click Remove. 
Click Next. 
Select options for saving processed files: 
Backups Select backup options for the original files. 
Save Script Saves the batch process settings for future use. 
Batch Outputs Performs your batch process. 
At the end of the batch process, you are prompted if any of the files added to the batch were not processed. 
Note: A log file named FireworksBatchLog.txt is created during the batch process. The log file is located at: 
e \Documents and Settings\<username>\Application Data\Adobe\Fireworks CS5\FireworksBatchLog.txt (Windows XP) 
e \Users\<username>\AppData\Roaming\Adobe\Fireworks CS5\ FireworksBatchLog.txt (Windows Vista) 
e /Users/<username>/Library/Application Support/Adobe/Fireworks CS5/FireworksBatchLog.txt (Mac OS) 


Change optimization settings during batch-processing li 
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Batch Process 


Batch Options: Include in Batch: 
Ee Export 


Scale 
Find and Replace 


Rename < Remove 


E Commands 


Export: 


Settings: | GIF webSnap 128 


JPEG - Smaller File 
Animated GIF Websnap 128 


1. Select Export from the Batch Options list and click Add. 
2. From the Settings pop-up menu, select from the following options and click OK: 


e Select Use Settings From Each File to keep previous export settings of each file during the batch process. For example, when you 
batch-process a folder of GIFs and JPEGs, the resulting files remain GIFs and JPEGs. Fireworks uses the original palette and 
compression settings when exporting each file. 


e Select Custom or click Edit to change settings in the Image Preview dialog box. 


e Select a preset export setting such as GIF Web216 or JPEG -— Better Quality. All files are converted to this setting. 


Change filenames during batch-processing i a 


1. Select Rename from the Batch Options list and click Add. 
2. Specify Rename options at the bottom of the Batch Process dialog box: 


Replace With Lets you replace characters in each filename with different characters that you specify, or you can delete characters from 
each filename. For example, if you have files named Temp_123.jpg, Temp_124.jpg, and Temp_125.jpg, you can replace “Temp_12” with 
“Birthday,” thus changing the filenames to Birthday3.jpg, Birthday4.jpg, and Birthday5.jpg. 


Replace Blanks With Lets you replace existing blanks in the filename with a character or characters you specify, or you can delete all 
blanks from each filename. For example, files named Pic nic.jpg and Slap stick.jpg can be changed to Picnic.jpg and Slapstick.jpg, or Pic- 
nic.jpg and Slap-stick.jpg. 


Add Prefix Lets you enter text to add to the beginning of the filename. For example, if you enter “night_”, then the file Sunrise.gif is renamed 
night_Sunrise.gif when it is batch-processed. 


Add Suffix Lets you enter text to add to the end of the filename before the filename extension. For example, if you enter “_ day”, then the file 
Sunset.gif is renamed Sunset_day.gif when it is batch-processed. 

Note: For each changed filename, you can do any combination of Replace, Replace blanks, Add Prefix, and Add Suffix. For example, you 
could replace “Temp” with “Party,” remove all blanks, and add a prefix and a suffix, all at the same time. 


3. Click Next to continue the batch process. 


Scaling graphics during batch-processing ee 


1. Select Scale from the Batch Options list and click Add. 
2. In the Scale pop-up menu, select a scaling option: 
No Scaling Exports files unaltered 
Scale To Size Scales images to the exact width and height you specify 


Scale To Fit Area Makes images fit proportionally with the maximum width and height range you specify 
Q Use Scale to Fit Area to convert a group of images to uniformly sized thumbnail images. 


Scale To Percentage Scales images by a percentage 


3. (Optional) If you selected Scale To Fit Area, also select the Only Scale Documents Currently Larger Than Target Size option. 
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Find and replace during batch-processing eer 


Batch Replace 


Find Text 


[C] Match case 
F] Regular expressions 


These options apply to object files such as Fireworks 
and FreeHand, but not image-only files such as GIF 
or JPEG. 


Batch Replace affects only the following file formats: Fireworks PNG, Illustrator, and FreeHand. Batch Replace does not affect GIFs and JPEGs. 


1. Select Find and Replace from the Batch Options list and click Add. 
. Click Edit. 


. Select the type of attribute to find and replace. 


2 
3 
4. Enter or select the specific element to find in the Find box. 
5. Enter or select the specific element to replace in the Change To box. 
6. Click OK to store Find and Replace settings. 

7 


. Click Next to continue the batch process. 


Š ä To thet 
Using commands for batch-processing SR 


Note: The exact location of the Commands folder varies from system to system. It also depends on whether you want the panel to be available 
just to your user profile or to all users. Command Panels folders are located in the Configuration folder in the Fireworks application folder and also 
in your user-specific Fireworks configuration folder. 


Perform JavaScript commands during batch-processing 
Note: Commands cannot be edited. 


1. Click the Plus (+) button (Windows) or the triangle (Mac OS) beside the Commands option in the Batch Options list to view the available 
commands. 


2. Select a command and click Add to add it to the Include In Batch list. 


Note: Some commands do not work during a batch process. Select commands that work within the document without requiring any object 
to be selected. 


Specify the location for saving backup files 
Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. 
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Batch Process 


Saving Files 
Batch Output: ® Same Location as Original File 
© Custom Location 


Backups: @ Overwrite Existing Backups 
oO Incremental Backups 


Cancel 


1. Select a location for the batch output. 
2. Select Backups to set your backup options. 
3. Select how you want to back up the files: 
Overwrite Existing Backups Overwrites the previous backup file. 


Incremental Backups Keeps copies of all the backup files. When you run a new batch process, a number is appended to the end of the 
filename of the new backup copy. 

Note: If Backup is deselected, batch-processing in the same file format overwrites the original file if the name is the same. However, batch- 
processing in a different file format creates a file and does not move or delete the original file. 


Batch processes as scripts 
Saving your script into the Commands folder on your hard disk adds it to the Commands menu in Fireworks. 


Create a batch process script 
1. Click Save Script to create a batch script. 
2. Enter aname and destination for the script. 


Note: The exact location of this folder varies. Commands folders are located in the Configuration folder in the Fireworks application folder 
and also in your user-specific Fireworks configuration folder. 


3. Click Save. 


Run a batch script 
1. Do one of the following: 
e In Fireworks, select Commands > Run Script. 
e Outside Fireworks, double-click the script filename on your hard disk. 


2. Select a script and click Open. 


Drag and drop frequently used scripts 
1. Save a script. 
2. Do one of the following: 
e Drag the script file icon onto the Fireworks desktop icon. 
e Drag the script file icon into an open Fireworks document. 


Note: Dragging multiple script files and multiple graphic files into Fireworks processes the graphic files multiple times, once for each 
script. 


More Help topics 
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Custom commands 


Rename a custom command that you created 

Delete a custom command that you created 

Edit a command, using JavaScript 

Edit selected actions from the History panel, using JavaScript 


Note: You can rename or delete any commands that you create by using the Manage Saved Commands option in Fireworks. Use the Extension 
Manager for other commands and extensions that were installed with Fireworks or that you downloaded and installed from the Adobe Exchange 
website. 


To thet 
Rename a custom command that you created eer 
1. Select Commands > Manage Saved Commands and select the command. 
2. Click Rename, enter a new name, and click OK. 
To the top 


Delete a custom command that you created 

& Do one of the following: 
e In Fireworks, select Commands > Manage Saved Commands. Then select the command and click Delete. 
e On your hard disk, delete the JSF file for the command from the Commands folder in your user-specific Fireworks configuration folder. 


Note: To rename or delete a command that shipped with Fireworks or that you downloaded from the Adobe Exchange, open the Extension 
Manager. 


Edit a command, using JavaScript To the top 


Command scripts are saved as JavaScript and can be edited in any text editor. 
1. From your desktop, navigate to the appropriate Commands or Command Panels folder on your hard disk. 
2. Open the script file in a text editor and modify the JavaScript code. 


3. Save and close the script. 


; ; : 5 ; To thet 
Edit selected actions from the History panel, using JavaScript EG 
In Fireworks, select a range of steps in the History panel. 
Click the Copy Steps To Clipboard button at the bottom of the History panel. 


. Create a new document in a text editing application. 


1. 
2. 
3 
4. Paste the steps into the new text document and modify as needed. 
5. Save and close the script. 

6 


. Copy the script to the Commands folder on your hard disk. 


e Commands saved directly into the Commands folder or in the History panel appear immediately in the Commands menu. 


e Commands saved in the Command Panels folder are available in the Window menu only after you restart Fireworks. 
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Extending Fireworks 


Open the Extension Manager from within Fireworks 
Creating an MXP file for assets 


An extension is a command script, command panel, library, filter, pattern, texture, or Auto Shape that adds to the functionality of Fireworks. 
Fireworks ships with the Adobe Extension Manager, which allows you to easily install, manage, and delete extensions. A collection of default 
extensions appears in the Commands menu. 


If you are proficient in JavaScript, you can create your own Fireworks extensions. You can also use Fireworks Cross Product Communication 
Architecture to allow ActionScript™ and C++ applications to control Fireworks. For more information, see Extending Fireworks Help. 


When installing or creating extensions, note the following: 


After you install an extension or create a custom command, Fireworks places it in the Commands menu. 

Third-party extensions are stored in subfolders of the Configuration folder in the Fireworks application folder. 
Commands that are stored as a SWF file in the Command Panels folder are available as panels in the Window menu. 
Commands that you create and save using the History panel are stored in your user’s Commands folder. 


For more information about extending Fireworks, see Extension Manager Help and visit the Fireworks Exchange at 
www.adobe.com/go/learn_fw_exchange_en. 


à 2 i r To the to 
Open the Extension Manager from within Fireworks P 
& Do one of the following: 
e Select Commands > Manage Extensions. 
e Select Help > Manage Extensions. 
To the top 


Creating an MXP file for assets 
1. 


3 
4 
5. 
6 
7 


Create an MXI file. You can use a copy of the MXI file in the Adobe Extension Manager CS5 folder as a template. For sample MXI files, see 
MXI files in the Configuration folder at the location where you have installed Adobe Fireworks CS5. 


In the <files> tag, do the following: 
a. In the <filename> attribute, specify the name of the files which are present locally and must be packaged into the MXP. 


b. In the <destination> attribute, specify the location on the user’s machine where the files must be installed. 


. Select Commands > Manage Extensions. 


. In the Adobe Extension Manager, select File > Package MXP Extension. 


Select the MXI file. 


. Specify a location for the MXP file. 


. Double-click the MXP file created at the specified location. The files mentioned in the MXI file are added to the location specified in the file. 


For example, if you want to add a set of STL files to Fireworks, specify the location for the STL files as $Fireworks\First Run\Styles in the MXI file. 
When you run an MXP file created using the MXI file, the STL files are installed at this location. The Styles can be accessed using the Styles 
panel in Fireworks after you close and re-open the application. 
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Find and replace 


The find and replace feature 

Select the source for the search 

Set options for finding and replacing in multiple files 
Find and replace text 

Find and replace fonts 

Find and replace colors 

Find and replace URLs 

Find and replace non-websafe colors 


The find and replace feature 


To the top 


e The Find and Replace feature helps you search for and replace elements, such as text, URLs, fonts, and colors. Find and Replace can 


search the current document or multiple files. 


e Find and Replace works only in Fireworks PNG files or in files containing vector objects, such as Adobe FreeHand® and Adobe Illustrator® 


files. 
Change to: 
| 
O Whoe word 
(match case 
DRaguis expressions 
a a 
Reolace Al 
Find panel 


A. Search option B. Find option 


Find and replace regular expressions 


The following examples illustrate the use of find and replace for regular expressions. 


Example 1 
1. Type K2Editor in the text object. 
2. Select Edit > Find and Replace. 
3. Select Regular Expressions. 
4. In Find, enter (\w+)Editor. 
5. In Replace, enter $1Soft. 
6. Click Replace All. 

The word K2Editor changes to K2Soft. 


Example 2 


1. Type IndyCar=3500:WRCar=2000 in the text object. 


2. In the Find and Replace dialog box, search for (\w{4})(\w{3})=\d+:\w+\2=\d+\d 


The string IndyCar=3500:WRCar=2000 is searched. 
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To thet 
Select the source for the search eee 


1. Open the document. 
2. Do one of the following to open the Find panel: 
e Select Window > Find. 
e Select Edit > Find And Replace. 
e Press Control+F (Windows) or Command+F (Mac OS). 


Note: If the files you select are locked or checked in from an Adobe Dreamweaver® site, you are prompted to unlock them or check 
them out before proceeding. 


3. From the Search pop-up menu, select a source for the search. 
4. From the Find pop-up menu, select an attribute to search for. Set the options for the selected Find attribute. 
5. Select a find-and-replace option. 


Note: Replacing objects in multiple files automatically saves those files and can’t be undone. 


Set options for finding and replacing in multiple files mee 


When finding and replacing among multiple files, specify how Fireworks handles multiple open files after the search. 
1. Select Replace Options from the Find panel Options menu. 
2. Select Save And Close Files to save and close each file after the find and replace. 
Only the originally active documents remain open. 


Note: If Save And Close is disabled and you are batch-processing a large number of files, Fireworks can run out of memory and cancel the 
batch process. 


3. Select a Backup Original Files option: 
No Backups Finds and replaces without backing up original files. The changed files replace the original files. 


Overwrite Existing Backups Creates and stores only one backup copy of each file changed during a find and replace. If you perform 
additional find-and-replace operations, the previous original file always replaces the backup copy. The backup copies are stored ina 
subfolder called Original Files. 


Incremental Backups Saves all backup copies of files changed during a find and replace. The original files are moved to an Original Files 
subfolder within their current folder, and an incremental number is appended to each filename. If you perform additional find-and-replace 
operations, the original file is copied to the Original Files folder, and the next higher number is added to its filename. For example, for a file 
named Drawing.png, the first time you find and replace, the backup file is named Drawing-1.png. The second time you find and replace, the 
backup file is named Drawing-2.png, and so on. 


4. Click OK. 


Find and replace text are 
1. In the Find panel, select Find Text from the second pop-up menu. 
2. Enter the text to search for. 
3. Enter the replacement text. 
4. (Optional) Select options to further define the search. 
Find and replace fonts MERSER 
1. In the Find panel, select Find Font from the second pop-up menu. 
2. Select the font and font style to find. 
Q You can restrict your search by minimum and maximum point sizes. 
3. Specify the font, font style, and point size to use as a replacement. 
To the top 


Find and replace colors 


1. In the Find panel, select Find Color from the second pop-up menu. 
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2. Select an item from the Apply To pop-up menu to determine how the colors found are applied: 
Fills & Strokes Finds and replaces both fill and stroke colors 
All Properties Finds and replaces fill, stroke, and effect colors 
Fills Finds and replaces a fill color, except within pattern fills 
Strokes Finds and replaces stroke colors only 


Effects Finds and replaces effect colors only 


Find and replace URLs ead 
1. In the Find panel, select Find URL from the second pop-up menu. 
2. Enter the URL to search for. 
3. Enter the replacement URL. 
4. (Optional) Select options to further define the search: 
Regular Expressions Matches parts of words or numbers conditionally during a search 
To the top 


Find and replace non-websafe colors 
For more information, see Optimize GIF, PNG, TIFF, BMP, and PICT files. 


A color is web-safe if it appears to be the same color on both Mac OS and Windows platforms. A non-websafe color is a color not included in the 
Web216 color palette. 


& Select Find Non-Web216 from the Find pop-up menu of the Find panel. 
Q Find Non-Web216 does not find or replace pixels within image objects. 
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Scripting 


Scripting with the History panel 
About scripting with JavaScript 
Creating commands and panels with Flash 


Scripting with the History panel To the top 


The History panel records a list of the steps you have performed while working in Fireworks. Each step is stored on a separate line of the History 
panel, starting with the most recent. By default, the panel remembers 20 steps. However, you can change this value at any time. 


You can save groups of steps in the History panel as a command that you can reuse. Because saved commands are not document-specific, you 
can use them in any Fireworks document. 


Saved commands are stored as JSF files in the Commands folder in your user-specific Fireworks configuration folder. 


You can execute recorded commands or a selection of actions in the History panel at any time. 


Save steps as a command for reuse 
1. Select the steps to save as a command: 
e Click a step, then Shift-click another to select a range of steps to save as a command. 
e Control-click (Windows) or Command-click (Mac OS) to select noncontiguous steps. 
2. Click the Save Steps As Command button at the bottom of the History panel. 


3. Enter a name for the command and click OK. 


Undo or redo steps 
“* Do one of the following: 


e Drag the Undo Marker up the panel until you reach the last step you want to undo or redo. 
e Click along the Undo Marker track on the left of the History panel. 


Note: Undone steps remain in the History panel highlighted in gray. 


Change the number of steps the History panel remembers 
1. Select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). 
2. Change the value in Undo Steps. 


Note: Additional steps require more computer memory. 


Clear all steps 
& Select Clear History from the History panel Options menu. 


Clearing steps frees memory and disk space. You can’t undo edits from cleared steps. 


Play back a saved command 
1. If necessary, select one or more objects. 


2. Select the command from the Commands menu. 


Replay a selection of steps 
1. Select one or more objects. 
2. Select the steps in the History panel. 
3. Click the Replay button at the bottom of the History panel. 


Steps marked with an X are nonrepeatable and can’t be played back. Separator lines indicate that a different object has become selected. 
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Commands created from steps that cross a separator line can produce unpredictable results. 


Apply selected steps to objects in many documents 
1. Select a range of steps. 
2. Click the Copy Steps To Clipboard button. 
3. Select one or more objects in any Fireworks document. 
4 


. Select Edit > Paste. 


Repeat the last step 
& Select Edit > Repeat Command Script. 


About scripting with JavaScript i 


To reduce the tedium of some repetitive tasks, write your own JavaScript in a text editor to run within Fireworks. You can control nearly every 
command or setting in Fireworks through JavaScript. Because Dreamweaver also uses JavaScript, you can write scripts that control Fireworks 
from within Dreamweaver. 


For documentation on the JavaScript API, see Extending Fireworks. 
; ; To thet 
Creating commands and panels with Flash TER 


To create your own Fireworks commands or panels, use Adobe Flash® to create SWF movies that contain JavaScript code. Store movies used as 
commands in the Commands folder on your hard disk. Store movies used as panels in the Command Panels folder (the Align panel is an 
example). 


Note: The exact location of these folders varies. Commands and Command Panels folders are located in the Configuration folder in the 
Fireworks application folder and also in your user-specific Fireworks configuration folder. 
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Preferences and keyboard shortcuts 


Customize using configuration files 


About user configuration files 
About master configuration files that affect all users 
Location of the Fireworks preferences file 


User-specific configuration files let you customize Fireworks features such as styles, keyboard shortcuts, and commands, without affecting the 
configuration of Fireworks for other users. 


Fireworks also installs master configuration files. 


To see configuration files, esure that your Folder View options are set to display all files and folders. On some systems, you might need to click 
Show Files on a folder to display the folder’s contents. For inforamtion about viewing all files and folders, see Windows Help. 


Note: When you uninstall or reinstall Fireworks, your user-specific configuration files are left untouched on most systems. If you want to reinstall 
Fireworks using the default settings, you must manually delete your user-specific configuration files before reinstalling the application. If you 
choose to remove preferences and user-specific configuration files during the uninstall process, the files are removed for all users on the system. 


a š š To thet 
About user configuration files AE 


Fireworks creates a different set of configuration files for each user. The files are stored in the Adobe/Fireworks CS5 folder in your user-specific 
Application Data folder (Windows) or Application Support folder (Mac OS). The location of this folder varies depending on what operating system 
you use and whether you have a multiuser or single-user system. For information on locating this folder, see your operating system 
documentation. 


Note: The names of some system folders may vary on localized and customized systems. 


About master configuration files that affect all users nee 


Master configuration files contain the default settings for Fireworks and affect all users. They are located in the Fireworks application folder, which 
is the location on your hard disk where you installed Fireworks. 


Note: Mac OS users should be familiar with the package concept from Apple. 
Fireworks changes your user-specific configuration files and not the master configuration files when you save most settings because many users 
don't have access to all files if they are on multiuser systems. 


Users with administrator-level access can customize features for all users by modifying the master configuration files. 


Save a master configuration setting for all users 
“* Save or drag a copy of the file into the appropriate location in the Fireworks application folder. 


A . x To thet 
Location of the Fireworks preferences file PEAR 


Fireworks preferences are stored in a file named Fireworks CS5 Preferences.txt (Windows) or Fireworks CS5 Preferences (Mac OS). The location 
of this file varies depending on your operating system. 


e In Windows, preferences are in your user-specific Fireworks configuration folder. 


e In Mac OS, preferences are in the Library/Preferences folder in your user folder. For information about locating your Mac OS user folder, see 
Apple Help. 


Note: On Mac OS, most Fireworks user-specific configuration files are stored in your user-specific Application Support folder. The Fireworks 
CS5 Preferences file is an exception. 


More Help topics 
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Select and customize keyboard shortcuts 


Select a shortcut set 

Create custom and secondary shortcuts 

Delete custom shortcuts and shortcut sets 

Create a reference sheet for the current shortcut set 


Fireworks lets you use keyboard shortcuts to select menu commands, select tools from the Tools panel, and speed up miscellaneous tasks that do 
not exist as menu commands. If you are accustomed to using shortcuts from other applications such as Adobe FreeHand, Adobe Illustrator, 
Photoshop, or products that use a different standard, you can switch to the shortcut set you prefer. 


To the to 
Select a shortcut set P 
1. Select Edit > Keyboard Shortcuts (Windows) or Fireworks > Keyboard Shortcuts (Mac OS). 
2. Select a shortcut set from the Current Set pop-up menu, and click OK. 
To the top 


Create custom and secondary shortcuts 


You can create custom keyboard shortcuts from a preinstalled set, and you can create secondary shortcuts to include several different ways to 
perform an action. 


The keyboard shortcuts except for menu commands cannot include modifier keys: Control, Shift, and Alt (Windows) or Command, Shift, Option, 
and Control (Mac OS). They must consist of a single letter or number key only. 


1. Select Edit > Keyboard Shortcuts (Windows) or Fireworks > Keyboard Shortcuts (Mac OS). 
2. Click the Duplicate Set button. 
3. Enter a name for the custom set and click OK. 
4. Select the appropriate shortcut category from the Commands list: 
Menu Commands Any command accessed through the menu bar 
Tools Any tool on the Tools panel. 
Miscellaneous A range of predefined actions 
5. From the Commands list, select the command whose shortcut you want to modify. 
6. Click in the Press Key text box, and press the desired keys for the new shortcut on the keyboard. 


7. To add a secondary shortcut to the shortcut list, click the Add A New Shortcut (+) button. Otherwise, click Change to replace the selected 
shortcut. 


Delete custom shortcuts and shortcut sets NSP 
Delete a custom shortcut set 

1. Select Edit > Keyboard Shortcuts (Windows) or Fireworks > Keyboard Shortcuts (Mac OS). 

2. Click the Delete Set button (trash can icon). 
3. Select a shortcut set. 
4 


. Click the Delete button. 


Delete a custom shortcut 
1. Select the command in the Commands list. 
2. Select the custom shortcut from the Shortcuts list. 


3. Click the Delete A Selected Shortcut (-) button. 
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To the to 
Create a reference sheet for the current shortcut set P 


A reference sheet is a record of the current shortcut set stored in HTML table format. You can view the reference sheet in a web browser or print 
it. 
Note: Reference sheets exported from Fireworks are UTF-8 encoded. 

1. Select Edit > Keyboard Shortcuts (Windows) or Fireworks > Keyboard Shortcuts (Mac OS). 

2. Click the Export Set As HTML button beside the Current Set text box. 
3. Enter reference sheet name, and select a file location. 
4 


. Click Save. 
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Set preferences 


General preferences 

Edit preferences 

Guides and Grids preferences 

Type preferences 

Photoshop Import and open preferences 
Launch and Edit preferences 

Plug-ins preferences 

Restore default preferences 


1. Choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS). 
2. Select the preferences category you want to modify. 


3. Make your changes, and click OK. 


To thet 
General preferences o the top 


Document Options To open the application directly into the workspace, deselect Show Startup Screen. To maintain stroke and effect dimensions 
when resizing objects, deselect Scale Strokes and Effects. 

Saving Files: Add Preview Icons (Mac OS only) Display or hide thumbnails of Fireworks PNG files on your hard disk. Deselect this option to 
display the traditional Fireworks icon used for Fireworks PNG files. Changes take effect after you save the file. 

Maximum Undos Set undo/redo steps to a number from O through 1009. This setting applies to both the Edit > Undo command and the History 
panel. A large number can increase the amount of required memory. 

Interpolation Select one of four different scaling methods that Fireworks uses to interpolate pixels when images are scaled: 


e Bicubic interpolation gives the sharpest and highest quality most of the time and is the default. 
e Bilinear interpolation gives sharper results than Soft interpolation but not as sharp as Bicubic. 


e Soft interpolation, which was used in Fireworks 1, gives a soft blur and eliminates sharp details. It is useful when others produce unwanted 
artifacts. 


e Nearest Neighbor interpolation results in jagged edges and sharp contrasts with no blurring. The effect is like Zooming in or out on an image. 


Color Defaults Select the default colors for brush strokes, fills, and highlight paths. Stroke and Fill options don’t automatically change the colors 
in the Tools panel. These options allow you to change the default colors in the Tools panel. 
Workspace To automatically collapse docked panels when you click away from them, select Auto-collapse Icon Panels. 


à To thet 
Edit preferences o the top 


Editing preferences control pointer appearance and visual cues for bitmap objects. 


Delete Objects When Cropping Permanently deletes pixels or objects outside the bounding box of a selection when you crop a document or 
resize the canvas. This option is valid only for bitmap objects. 

Delete Paths When Converting To Marquee Permanently deletes the path after it has been converted to a marquee. 

Brush-size Painting Cursors Set the size and shape of the tool pointers. For certain large multi-tipped brushes, the cross-hair pointer is used by 
default. When this option and Precise Cursors are deselected, tool icon pointers are displayed. 

Precise Cursors Replaces tool icon pointers with the cross-hair pointer. 

Turn Off “Hide Edges” Disables Hide Edges when the selection changes. 

Show Pen Preview Provides a preview of the next path segment that is created when you click with the Pen tool. 

Show Solid Points Shows selected points as dimmed and deselected points as solid. 

Mouse Highlight Highlights the items that a current mouse click selects. 

Preview Drag Shows a preview of the new object location when dragging. 

Show Fill Handles Allows the on-screen editing of fills. 

Pick Distance Specify how close to an object (1 - 10 pixels) the pointer must be before you can select it. 

9-Slice Scaling Option Automatically ungroups autoshapes when you use the 9-Slice Scaling tool, eliminating the dialog box asking if you want to 
ungroup such shapes. 


ù P To thet 
Guides and Grids preferences ERN 
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Color boxes When clicked, display a pop-window from which you can select a color or enter hexadecimal values. 

Show Displays guides or grids on the canvas. 

Snap Snaps objects to guide or grid lines. 

Lock Locks previously placed guides in place, preventing you from inadvertently moving them while editing objects. 

Snap Distance Specifies how close the object you are moving must be (1 - 10 pixels) before it snaps to a grid or guide line. Snap Distance works 
when Snap To Grid or Snap To Guides is selected. 


Grid Settings Change the size, in pixels, of grid cells. Enter values in the horizontal and vertical spacing boxes. 


To thet 
Type preferences o the top 


Leading, Baseline Shift Change the increment value for the related keyboard shortcuts. 
Q To create a complete list of type-related shortcuts, see Create a reference sheet for the current shortcut set. 


Show Font Names in English Replaces Asian characters in font menus. 
Note: This change takes effect after you restart Fireworks. 
Font Preview Size Specifies the point size of font examples in menus. 


Number of Recent Fonts Determines the maximum number of recently used fonts listed above the divider in font menus. 
Note: This change takes effect after you restart Fireworks. 
Default Font Specifies which font replaces any document fonts your system lacks. 


Photoshop Import and open preferences To the top 


These preferences determine how Fireworks behaves when you import or open Photoshop files. For more information, see Working with 
Photoshop. 


Show Import Dialog Box Displays options when you import PSD files using the File > Import command. 

Show Open Dialog Box Displays options when you drag PSD files into Fireworks or use the File > Open command. 

Share Layers Between States Adds each imported layer to all states in the Fireworks file. If this option is deselected, Fireworks adds each layer 
to a separate state. This is useful when you import files you want to use as animations. 

Bitmap Images With Editable Effects Allows editing the effects on the bitmap images when importing. Bitmap images cannot be edited. 
Flattened Bitmap Images Imports the bitmap images and their effects as flattened images which cannot be edited. 

Editable Text Imports the text layers as editable text. You cannot change the text formatting such as strikethrough, superscript, subscript, and 
autohyphenation in Fireworks. Also, you cannot separate ligatures in the source text. 

Flattened Bitmap Images Imports the text layers as flattened images that cannot be edited. 

Editable Paths And Effects Allows editing on the shape layers and related effects. 

Flattened Bitmap Images Imports the shape layers as flattened images that cannot be edited. 


Flattened Bitmap Images With Editable Effects Imports the shape layers as flattened images but allows editing the effects associated with 
them. 


Layer Effects Replaces Photoshop Live Effects with similar Fireworks filters. 
Clipping Path Masks Rasterizes and removes clipping masks, maintaining their appearance. Deselect this option if you want to edit these masks 
in Fireworks. However, the appearance varies from Photoshop. 


; To thet 
Launch and Edit preferences eae 
Launch-and-edit preferences control how external applications launch and edit graphics in Fireworks. 

1. Choose either of the following pop-up menus: 


When Editing From External Application Determines whether the original Fireworks PNG file opens when you use Fireworks to edit 
images from within other applications. 


When Optimizing From External Application Determines whether the original Fireworks PNG file opens when you optimize a graphic. 
This setting does not apply to Director, which always automatically opens and optimizes a graphic without asking for a source PNG, even if 
you set this preference differently in Fireworks. 


2. Specify how to edit Fireworks images placed in external applications: 


Always Use Source PNG Automatically opens the Fireworks PNG file that is defined in the Design Note as the source for the placed 
image. Updates are made to both the source PNG and its corresponding placed image. 


Never Use Source PNG Automatically opens the placed Fireworks image, regardless of whether a source PNG file exists. Updates are 
made only to the placed image. 


Ask When Launching Lets you specify each time whether to open the source PNG file. When you edit or optimize a placed image, 
Fireworks prompts you to make a launch-and-edit decision. You can also specify global launch-and-edit preferences from this prompt. 
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F To the to 
Plug-ins preferences P 


These preferences let you access additional Adobe Photoshop plug-ins, texture files, and pattern files. The target folders can exist on your hard 
disk, a CD-ROM, an external hard drive, or a network volume. 


Photoshop plug-ins appear in the Fireworks Filters menu and the Property inspector's Add Effects menu. Textures or patterns stored as PNG, 
JPEG, and GIF files appear as options in the Pattern and Texture pop-up menus in the Property inspector. 


For more information about textures and patterns, see Add texture to a stroke or fill. 


To the to 
Restore default preferences P 


Note: Restoring default preferences removes all the custom settings and restores Fireworks to its original configuration. 
1. Quit Fireworks. 
2. Locate the Fireworks Preferences file on your hard disk and delete it. 
The exact location of this file varies from system to system. See Location of the Fireworks preferences file 
3. Restart Fireworks. 
The next time Fireworks is launched, a new preferences file is created. 


More Help topics 
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View application package contents (Mac OS only) 


On Mac OS, Fireworks is installed in a self-contained format called the application program package. The application package is where the 
Fireworks application file is stored, along with all default configuration files that come with Fireworks. Package contents are hidden by default. 


1. Navigate to the location on your hard disk where you installed Fireworks. 


2. Control-click the Fireworks CS5 icon and select Show Package Contents. 
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